diff --git a/index.html b/index.html
index 996cd9c7f..5b58ac5fd 100644
--- a/index.html
+++ b/index.html
@@ -10,19 +10,14 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="google-site-verification" content="WpdMF3NaKepMJ5EE4qv_3tK5eKD_sWnUYk02Lc5EtXQ" />
         <title>Front-End Projects | Home Page</title>
-        <!--Main CSS-->
         <link rel="stylesheet" href="style.css">
-        <!--fontawesome-->
         <script src="https://kit.fontawesome.com/332a215f17.js" crossorigin="anonymous"></script>
-        <!--Animate.css--->
         <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
-        <!-- Favicon -->
         <link rel="icon" href="img/favicon.ico" type="image/png" />
     </head>
 
     <body class="notLoaded">
 
-        <!-- Preloader Animation -->
         <div id="load">
             <h1 class="loading-text">Loading...</h1>
             <div class="container">
@@ -34,30 +29,29 @@ <h1 class="loading-text">Loading...</h1>
             </div>
         </div>
 
-        <!-- scrollbar button -->
         <div id="progress">
             <i id="progress-value" class="fas fa-arrow-up"></i>
         </div>
 
-        <!-- Navigation Section -->
         <nav>
             <div>
                 <a href="index.html"><img src="img/LOGO.png" alt="logo"></a>
             </div>
-            <div>
+            <div class="nav-right">
                 <ul>
                     <li><a href="index.html">Home</a></li>
                     <li><a href="#projects">Projects</a></li>
                     <li><a href="https://github.com/TusharKesarwani/Front-End-Projects" class="github-btn"><i
                                 class="fa-brands fa-github"></i> &nbsp; Goto GitHub Repository</a></li>
                 </ul>
+                <button id="theme-toggle-btn" aria-label="Switch to dark mode" title="Switch to dark mode">
+                    <i class="fa-solid fa-moon"></i>
+                </button>
             </div>
         </nav>
 
-        <!-- Body Section -->
         <main>
 
-            <!-- Hero -->
             <div class="left">
                 <div class="headings">
                     <h1>Front End<br>Projects</h1>
@@ -127,6 +121,8 @@ <h1 class="title">Contributors</h1>
             AOS.init();
         </script>
         <script type="module" src="script.js"></script>
+        <!-- CHANGE: Load theme toggle script — added for dark/light mode feature -->
+        <script src="theme.js"></script>
         <script>
             // Code for preloader starts
             document.addEventListener( "DOMContentLoaded", function ()
diff --git a/style.css b/style.css
index 389a351be..c44165d0f 100644
--- a/style.css
+++ b/style.css
@@ -1,655 +1,810 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700&display=swap");
 * {
-	margin: 0;
-	padding: 0;
-	font-family: "Noto Sans", sans-serif;
-	scroll-behavior: smooth;
-	box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Noto Sans", sans-serif;
+  scroll-behavior: smooth;
+  box-sizing: border-box;
 }
 
 /*  CSS preloader starts */
 
 .loading-text {
-	letter-spacing: 5px;
-	color: rgb(180, 180, 180);
-	font-family: "Noto Sans", sans-serif;
+  letter-spacing: 5px;
+  color: rgb(180, 180, 180);
+  font-family: "Noto Sans", sans-serif;
 }
 .notLoaded {
-	height: 100vh;
-	overflow: hidden;
-	position: fixed;
-	margin: 0px;
+  height: 100vh;
+  overflow: hidden;
+  position: fixed;
+  margin: 0px;
 }
 
 :root {
-	--duration: 1.5s;
-	--container-size: 250px;
-	--box-size: 33px;
-	--box-border-radius: 15%;
+  --duration: 1.5s;
+  --container-size: 250px;
+  --box-size: 33px;
+  --box-border-radius: 15%;
 }
 
 #load {
-	width: 100vw;
-	height: 100vh;
-	overflow: hidden;
-	margin: 0;
-	padding: 0;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: column;
-	gap: 30px;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 30px;
 }
 
 .container {
-	width: var(--container-size);
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	position: relative;
+  width: var(--container-size);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
 }
 
 .box {
-	width: var(--box-size);
-	height: var(--box-size);
-	position: relative;
-	display: block;
-	transform-origin: -50% center;
-	border-radius: var(--box-border-radius);
+  width: var(--box-size);
+  height: var(--box-size);
+  position: relative;
+  display: block;
+  transform-origin: -50% center;
+  border-radius: var(--box-border-radius);
 }
 .box:after {
-	content: "";
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	top: 0;
-	right: 0;
-	background-color: lightblue;
-	border-radius: var(--box-border-radius);
-	box-shadow: 0px 0px 10px 0px rgba(28, 159, 255, 0.4);
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: lightblue;
+  border-radius: var(--box-border-radius);
+  box-shadow: 0px 0px 10px 0px rgba(28, 159, 255, 0.4);
 }
 .box:nth-child(1) {
-	-webkit-animation: slide var(--duration) ease-in-out infinite alternate;
-	animation: slide var(--duration) ease-in-out infinite alternate;
+  -webkit-animation: slide var(--duration) ease-in-out infinite alternate;
+  animation: slide var(--duration) ease-in-out infinite alternate;
 }
 .box:nth-child(1):after {
-	-webkit-animation: color-change var(--duration) ease-in-out infinite alternate;
-	animation: color-change var(--duration) ease-in-out infinite alternate;
+  -webkit-animation: color-change var(--duration) ease-in-out infinite alternate;
+  animation: color-change var(--duration) ease-in-out infinite alternate;
 }
 .box:nth-child(2) {
-	-webkit-animation: flip-1 var(--duration) ease-in-out infinite alternate;
-	animation: flip-1 var(--duration) ease-in-out infinite alternate;
+  -webkit-animation: flip-1 var(--duration) ease-in-out infinite alternate;
+  animation: flip-1 var(--duration) ease-in-out infinite alternate;
 }
 .box:nth-child(2):after {
-	-webkit-animation: squidge-1 var(--duration) ease-in-out infinite alternate;
-	animation: squidge-1 var(--duration) ease-in-out infinite alternate;
+  -webkit-animation: squidge-1 var(--duration) ease-in-out infinite alternate;
+  animation: squidge-1 var(--duration) ease-in-out infinite alternate;
 }
 .box:nth-child(3) {
-	-webkit-animation: flip-2 var(--duration) ease-in-out infinite alternate;
-	animation: flip-2 var(--duration) ease-in-out infinite alternate;
+  -webkit-animation: flip-2 var(--duration) ease-in-out infinite alternate;
+  animation: flip-2 var(--duration) ease-in-out infinite alternate;
 }
 .box:nth-child(3):after {
-	-webkit-animation: squidge-2 var(--duration) ease-in-out infinite alternate;
-	animation: squidge-2 var(--duration) ease-in-out infinite alternate;
+  -webkit-animation: squidge-2 var(--duration) ease-in-out infinite alternate;
+  animation: squidge-2 var(--duration) ease-in-out infinite alternate;
 }
 .box:nth-child(4) {
-	-webkit-animation: flip-3 var(--duration) ease-in-out infinite alternate;
-	animation: flip-3 var(--duration) ease-in-out infinite alternate;
+  -webkit-animation: flip-3 var(--duration) ease-in-out infinite alternate;
+  animation: flip-3 var(--duration) ease-in-out infinite alternate;
 }
 .box:nth-child(4):after {
-	-webkit-animation: squidge-3 var(--duration) ease-in-out infinite alternate;
-	animation: squidge-3 var(--duration) ease-in-out infinite alternate;
+  -webkit-animation: squidge-3 var(--duration) ease-in-out infinite alternate;
+  animation: squidge-3 var(--duration) ease-in-out infinite alternate;
 }
 .box:nth-child(5) {
-	-webkit-animation: flip-4 var(--duration) ease-in-out infinite alternate;
-	animation: flip-4 var(--duration) ease-in-out infinite alternate;
+  -webkit-animation: flip-4 var(--duration) ease-in-out infinite alternate;
+  animation: flip-4 var(--duration) ease-in-out infinite alternate;
 }
 .box:nth-child(5):after {
-	-webkit-animation: squidge-4 var(--duration) ease-in-out infinite alternate;
-	animation: squidge-4 var(--duration) ease-in-out infinite alternate;
+  -webkit-animation: squidge-4 var(--duration) ease-in-out infinite alternate;
+  animation: squidge-4 var(--duration) ease-in-out infinite alternate;
 }
 .box:nth-child(2):after {
-	background-color: #0d4360;
+  background-color: #0d4360;
 }
 .box:nth-child(3):after {
-	background-color: #146591;
+  background-color: #146591;
 }
 .box:nth-child(4):after {
-	background-color: #1b88c4;
+  background-color: #1b88c4;
 }
 .box:nth-child(5):after {
-	background-color: #34a6e3;
+  background-color: #34a6e3;
 }
 
 @-webkit-keyframes slide {
-	0% {
-		background-color: #0d4360;
-		transform: translatex(0vw);
-	}
-	100% {
-		background-color: #34a6e3;
-		transform: translatex(
-			calc(var(--container-size) - (var(--box-size) * 1.25))
-		);
-	}
+  0% {
+    background-color: #0d4360;
+    transform: translatex(0vw);
+  }
+  100% {
+    background-color: #34a6e3;
+    transform: translatex(
+      calc(var(--container-size) - (var(--box-size) * 1.25))
+    );
+  }
 }
 
 @keyframes slide {
-	0% {
-		background-color: #0d4360;
-		transform: translatex(0vw);
-	}
-	100% {
-		background-color: #34a6e3;
-		transform: translatex(
-			calc(var(--container-size) - (var(--box-size) * 1.25))
-		);
-	}
+  0% {
+    background-color: #0d4360;
+    transform: translatex(0vw);
+  }
+  100% {
+    background-color: #34a6e3;
+    transform: translatex(
+      calc(var(--container-size) - (var(--box-size) * 1.25))
+    );
+  }
 }
 @-webkit-keyframes color-change {
-	0% {
-		background-color: #0d4360;
-	}
-	100% {
-		background-color: #34a6e3;
-	}
+  0% {
+    background-color: #0d4360;
+  }
+  100% {
+    background-color: #34a6e3;
+  }
 }
 @keyframes color-change {
-	0% {
-		background-color: #0d4360;
-	}
-	100% {
-		background-color: #34a6e3;
-	}
+  0% {
+    background-color: #0d4360;
+  }
+  100% {
+    background-color: #34a6e3;
+  }
 }
 @-webkit-keyframes flip-1 {
-	0%,
-	15% {
-		transform: rotate(0);
-	}
-	35%,
-	100% {
-		transform: rotate(-180deg);
-	}
+  0%,
+  15% {
+    transform: rotate(0);
+  }
+  35%,
+  100% {
+    transform: rotate(-180deg);
+  }
 }
 @keyframes flip-1 {
-	0%,
-	15% {
-		transform: rotate(0);
-	}
-	35%,
-	100% {
-		transform: rotate(-180deg);
-	}
+  0%,
+  15% {
+    transform: rotate(0);
+  }
+  35%,
+  100% {
+    transform: rotate(-180deg);
+  }
 }
 @-webkit-keyframes squidge-1 {
-	5% {
-		transform-origin: center bottom;
-		transform: scalex(1) scaley(1);
-	}
-	15% {
-		transform-origin: center bottom;
-		transform: scalex(1.3) scaley(0.7);
-	}
-	25%,
-	20% {
-		transform-origin: center bottom;
-		transform: scalex(0.8) scaley(1.4);
-	}
-	55%,
-	100% {
-		transform-origin: center top;
-		transform: scalex(1) scaley(1);
-	}
-	40% {
-		transform-origin: center top;
-		transform: scalex(1.3) scaley(0.7);
-	}
+  5% {
+    transform-origin: center bottom;
+    transform: scalex(1) scaley(1);
+  }
+  15% {
+    transform-origin: center bottom;
+    transform: scalex(1.3) scaley(0.7);
+  }
+  25%,
+  20% {
+    transform-origin: center bottom;
+    transform: scalex(0.8) scaley(1.4);
+  }
+  55%,
+  100% {
+    transform-origin: center top;
+    transform: scalex(1) scaley(1);
+  }
+  40% {
+    transform-origin: center top;
+    transform: scalex(1.3) scaley(0.7);
+  }
 }
 @keyframes squidge-1 {
-	5% {
-		transform-origin: center bottom;
-		transform: scalex(1) scaley(1);
-	}
-	15% {
-		transform-origin: center bottom;
-		transform: scalex(1.3) scaley(0.7);
-	}
-	25%,
-	20% {
-		transform-origin: center bottom;
-		transform: scalex(0.8) scaley(1.4);
-	}
-	55%,
-	100% {
-		transform-origin: center top;
-		transform: scalex(1) scaley(1);
-	}
-	40% {
-		transform-origin: center top;
-		transform: scalex(1.3) scaley(0.7);
-	}
+  5% {
+    transform-origin: center bottom;
+    transform: scalex(1) scaley(1);
+  }
+  15% {
+    transform-origin: center bottom;
+    transform: scalex(1.3) scaley(0.7);
+  }
+  25%,
+  20% {
+    transform-origin: center bottom;
+    transform: scalex(0.8) scaley(1.4);
+  }
+  55%,
+  100% {
+    transform-origin: center top;
+    transform: scalex(1) scaley(1);
+  }
+  40% {
+    transform-origin: center top;
+    transform: scalex(1.3) scaley(0.7);
+  }
 }
 @-webkit-keyframes flip-2 {
-	0%,
-	30% {
-		transform: rotate(0);
-	}
-	50%,
-	100% {
-		transform: rotate(-180deg);
-	}
+  0%,
+  30% {
+    transform: rotate(0);
+  }
+  50%,
+  100% {
+    transform: rotate(-180deg);
+  }
 }
 @keyframes flip-2 {
-	0%,
-	30% {
-		transform: rotate(0);
-	}
-	50%,
-	100% {
-		transform: rotate(-180deg);
-	}
+  0%,
+  30% {
+    transform: rotate(0);
+  }
+  50%,
+  100% {
+    transform: rotate(-180deg);
+  }
 }
 @-webkit-keyframes squidge-2 {
-	20% {
-		transform-origin: center bottom;
-		transform: scalex(1) scaley(1);
-	}
-	30% {
-		transform-origin: center bottom;
-		transform: scalex(1.3) scaley(0.7);
-	}
-	40%,
-	35% {
-		transform-origin: center bottom;
-		transform: scalex(0.8) scaley(1.4);
-	}
-	70%,
-	100% {
-		transform-origin: center top;
-		transform: scalex(1) scaley(1);
-	}
-	55% {
-		transform-origin: center top;
-		transform: scalex(1.3) scaley(0.7);
-	}
+  20% {
+    transform-origin: center bottom;
+    transform: scalex(1) scaley(1);
+  }
+  30% {
+    transform-origin: center bottom;
+    transform: scalex(1.3) scaley(0.7);
+  }
+  40%,
+  35% {
+    transform-origin: center bottom;
+    transform: scalex(0.8) scaley(1.4);
+  }
+  70%,
+  100% {
+    transform-origin: center top;
+    transform: scalex(1) scaley(1);
+  }
+  55% {
+    transform-origin: center top;
+    transform: scalex(1.3) scaley(0.7);
+  }
 }
 @keyframes squidge-2 {
-	20% {
-		transform-origin: center bottom;
-		transform: scalex(1) scaley(1);
-	}
-	30% {
-		transform-origin: center bottom;
-		transform: scalex(1.3) scaley(0.7);
-	}
-	40%,
-	35% {
-		transform-origin: center bottom;
-		transform: scalex(0.8) scaley(1.4);
-	}
-	70%,
-	100% {
-		transform-origin: center top;
-		transform: scalex(1) scaley(1);
-	}
-	55% {
-		transform-origin: center top;
-		transform: scalex(1.3) scaley(0.7);
-	}
+  20% {
+    transform-origin: center bottom;
+    transform: scalex(1) scaley(1);
+  }
+  30% {
+    transform-origin: center bottom;
+    transform: scalex(1.3) scaley(0.7);
+  }
+  40%,
+  35% {
+    transform-origin: center bottom;
+    transform: scalex(0.8) scaley(1.4);
+  }
+  70%,
+  100% {
+    transform-origin: center top;
+    transform: scalex(1) scaley(1);
+  }
+  55% {
+    transform-origin: center top;
+    transform: scalex(1.3) scaley(0.7);
+  }
 }
 @-webkit-keyframes flip-3 {
-	0%,
-	45% {
-		transform: rotate(0);
-	}
-	65%,
-	100% {
-		transform: rotate(-180deg);
-	}
+  0%,
+  45% {
+    transform: rotate(0);
+  }
+  65%,
+  100% {
+    transform: rotate(-180deg);
+  }
 }
 @keyframes flip-3 {
-	0%,
-	45% {
-		transform: rotate(0);
-	}
-	65%,
-	100% {
-		transform: rotate(-180deg);
-	}
+  0%,
+  45% {
+    transform: rotate(0);
+  }
+  65%,
+  100% {
+    transform: rotate(-180deg);
+  }
 }
 @-webkit-keyframes squidge-3 {
-	35% {
-		transform-origin: center bottom;
-		transform: scalex(1) scaley(1);
-	}
-	45% {
-		transform-origin: center bottom;
-		transform: scalex(1.3) scaley(0.7);
-	}
-	55%,
-	50% {
-		transform-origin: center bottom;
-		transform: scalex(0.8) scaley(1.4);
-	}
-	85%,
-	100% {
-		transform-origin: center top;
-		transform: scalex(1) scaley(1);
-	}
-	70% {
-		transform-origin: center top;
-		transform: scalex(1.3) scaley(0.7);
-	}
+  35% {
+    transform-origin: center bottom;
+    transform: scalex(1) scaley(1);
+  }
+  45% {
+    transform-origin: center bottom;
+    transform: scalex(1.3) scaley(0.7);
+  }
+  55%,
+  50% {
+    transform-origin: center bottom;
+    transform: scalex(0.8) scaley(1.4);
+  }
+  85%,
+  100% {
+    transform-origin: center top;
+    transform: scalex(1) scaley(1);
+  }
+  70% {
+    transform-origin: center top;
+    transform: scalex(1.3) scaley(0.7);
+  }
 }
 @keyframes squidge-3 {
-	35% {
-		transform-origin: center bottom;
-		transform: scalex(1) scaley(1);
-	}
-	45% {
-		transform-origin: center bottom;
-		transform: scalex(1.3) scaley(0.7);
-	}
-	55%,
-	50% {
-		transform-origin: center bottom;
-		transform: scalex(0.8) scaley(1.4);
-	}
-	85%,
-	100% {
-		transform-origin: center top;
-		transform: scalex(1) scaley(1);
-	}
-	70% {
-		transform-origin: center top;
-		transform: scalex(1.3) scaley(0.7);
-	}
+  35% {
+    transform-origin: center bottom;
+    transform: scalex(1) scaley(1);
+  }
+  45% {
+    transform-origin: center bottom;
+    transform: scalex(1.3) scaley(0.7);
+  }
+  55%,
+  50% {
+    transform-origin: center bottom;
+    transform: scalex(0.8) scaley(1.4);
+  }
+  85%,
+  100% {
+    transform-origin: center top;
+    transform: scalex(1) scaley(1);
+  }
+  70% {
+    transform-origin: center top;
+    transform: scalex(1.3) scaley(0.7);
+  }
 }
 @-webkit-keyframes flip-4 {
-	0%,
-	60% {
-		transform: rotate(0);
-	}
-	80%,
-	100% {
-		transform: rotate(-180deg);
-	}
+  0%,
+  60% {
+    transform: rotate(0);
+  }
+  80%,
+  100% {
+    transform: rotate(-180deg);
+  }
 }
 @keyframes flip-4 {
-	0%,
-	60% {
-		transform: rotate(0);
-	}
-	80%,
-	100% {
-		transform: rotate(-180deg);
-	}
+  0%,
+  60% {
+    transform: rotate(0);
+  }
+  80%,
+  100% {
+    transform: rotate(-180deg);
+  }
 }
 @-webkit-keyframes squidge-4 {
-	50% {
-		transform-origin: center bottom;
-		transform: scalex(1) scaley(1);
-	}
-	60% {
-		transform-origin: center bottom;
-		transform: scalex(1.3) scaley(0.7);
-	}
-	70%,
-	65% {
-		transform-origin: center bottom;
-		transform: scalex(0.8) scaley(1.4);
-	}
-	100%,
-	100% {
-		transform-origin: center top;
-		transform: scalex(1) scaley(1);
-	}
-	85% {
-		transform-origin: center top;
-		transform: scalex(1.3) scaley(0.7);
-	}
+  50% {
+    transform-origin: center bottom;
+    transform: scalex(1) scaley(1);
+  }
+  60% {
+    transform-origin: center bottom;
+    transform: scalex(1.3) scaley(0.7);
+  }
+  70%,
+  65% {
+    transform-origin: center bottom;
+    transform: scalex(0.8) scaley(1.4);
+  }
+  100%,
+  100% {
+    transform-origin: center top;
+    transform: scalex(1) scaley(1);
+  }
+  85% {
+    transform-origin: center top;
+    transform: scalex(1.3) scaley(0.7);
+  }
 }
 @keyframes squidge-4 {
-	50% {
-		transform-origin: center bottom;
-		transform: scalex(1) scaley(1);
-	}
-	60% {
-		transform-origin: center bottom;
-		transform: scalex(1.3) scaley(0.7);
-	}
-	70%,
-	65% {
-		transform-origin: center bottom;
-		transform: scalex(0.8) scaley(1.4);
-	}
-	100%,
-	100% {
-		transform-origin: center top;
-		transform: scalex(1) scaley(1);
-	}
-	85% {
-		transform-origin: center top;
-		transform: scalex(1.3) scaley(0.7);
-	}
+  50% {
+    transform-origin: center bottom;
+    transform: scalex(1) scaley(1);
+  }
+  60% {
+    transform-origin: center bottom;
+    transform: scalex(1.3) scaley(0.7);
+  }
+  70%,
+  65% {
+    transform-origin: center bottom;
+    transform: scalex(0.8) scaley(1.4);
+  }
+  100%,
+  100% {
+    transform-origin: center top;
+    transform: scalex(1) scaley(1);
+  }
+  85% {
+    transform-origin: center top;
+    transform: scalex(1.3) scaley(0.7);
+  }
 }
 /* preloader ends */
 
 a {
-	text-decoration: none;
+  text-decoration: none;
 }
 
 body {
-	background-color: white;
+  background-color: white;
 }
 
+body.dark-mode {
+  --dm-bg: #0f172a;
+  --dm-surface: #1e293b;
+  --dm-nav: #0a0f1e;
+  --dm-text: #e2e8f0;
+  --dm-text-muted: #94a3b8;
+  --dm-border: #334155;
+  --dm-accent: #05f2c7;
+  --dm-card-bg: #1e3a5f;
+  --dm-footer: #0a0f1e;
+
+  background-color: var(--dm-bg);
+  color: var(--dm-text);
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+/* Navigation */
+body.dark-mode nav {
+  background-color: var(--dm-nav);
+}
+
+/* Hero headings & paragraph */
+body.dark-mode main .left h1 {
+  color: var(--dm-accent);
+}
+body.dark-mode main .left p {
+  color: var(--dm-text-muted);
+}
+
+/* CTA button */
+body.dark-mode .github-btn-cta {
+  background-color: var(--dm-card-bg);
+  color: var(--dm-text);
+}
+body.dark-mode .github-btn-cta:hover {
+  background-color: var(--dm-accent);
+  color: var(--dm-nav);
+}
+
+/* GitHub nav button */
+body.dark-mode .github-btn {
+  background-color: var(--dm-surface);
+  color: var(--dm-text);
+}
+body.dark-mode .github-btn:hover {
+  background-color: var(--dm-accent);
+  color: var(--dm-nav);
+}
+
+/* Projects section */
+body.dark-mode .project-section {
+  background-color: var(--dm-surface);
+  border-color: var(--dm-border);
+}
+
+/* Section titles */
+body.dark-mode .title {
+  color: var(--dm-accent);
+}
+body.dark-mode .bg-title {
+  color: #1e2d40;
+}
+
+/* Search form */
+body.dark-mode .project-header #searchForm {
+  border-color: var(--dm-accent);
+  background-color: var(--dm-surface);
+}
+body.dark-mode .project-header #search {
+  background-color: var(--dm-surface);
+  color: var(--dm-text);
+}
+body.dark-mode .project-header button {
+  background-color: var(--dm-surface);
+  color: var(--dm-text);
+}
+
+/* Contributors section */
+body.dark-mode .contributors {
+  background-color: var(--dm-bg);
+  border-color: var(--dm-border);
+}
+
+/* Footer */
+body.dark-mode footer {
+  background-color: var(--dm-footer);
+}
+
+/* Scroll progress button */
+body.dark-mode #progress #progress-value {
+  background-color: var(--dm-surface);
+  color: var(--dm-accent);
+}
+
+/* ---- Theme Toggle Button ---- */
+/* Sits inline with the other nav links; styled to match .github-btn */
+#theme-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.6rem;
+  height: 2.2rem;
+  background-color: #fff;
+  color: #3d3d3d;
+  border: none;
+  margin: 0;
+  padding: 0;
+  border-radius: 3rem;
+  font-family: "Noto Sans", sans-serif;
+  cursor: pointer;
+  line-height: 1;
+  vertical-align: middle;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+#theme-toggle-btn:hover {
+  background-color: #05f2c7;
+  color: #0d4360;
+}
+
+/* Dark mode state for the button itself */
+body.dark-mode #theme-toggle-btn {
+  background-color: #1e293b;
+  color: #e2e8f0;
+}
+body.dark-mode #theme-toggle-btn:hover {
+  background-color: #05f2c7;
+  color: #0a0f1e;
+}
+
+/* Icon inside the button — subtle spin on hover */
+#theme-toggle-btn i {
+  font-size: 0.9rem;
+  width: 1em;
+  text-align: center;
+  transition: transform 0.35s ease;
+}
+#theme-toggle-btn:hover i {
+  transform: rotate(15deg);
+}
+/* ============================================================
+   END DARK MODE
+   ============================================================ */
+
 #progress {
-	cursor: pointer;
-	position: fixed;
-	right: 10px;
-	bottom: 20px;
-	width: 60px;
-	height: 60px;
-	z-index: 111111;
-	display: none;
-	place-items: center;
-	border-radius: 50%;
-	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  position: fixed;
+  right: 10px;
+  bottom: 20px;
+  width: 60px;
+  height: 60px;
+  z-index: 111111;
+  display: none;
+  place-items: center;
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 #progress #progress-value {
-	display: block;
-	width: calc(100% - 10px);
-	height: calc(100% - 10px);
-	background-color: white;
-	border-radius: 50%;
-	display: grid;
-	place-items: center;
-	font-size: 25px;
-	color: #001a2e;
+  display: block;
+  width: calc(100% - 10px);
+  height: calc(100% - 10px);
+  background-color: white;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 25px;
+  color: #001a2e;
 }
 
 nav {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	background-color: #0d4360;
-	padding: 0 2rem;
-	margin: 0 auto;
-	position: sticky;
-	top: 0;
-	z-index: 100;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #0d4360;
+  padding: 0 2rem;
+  margin: 0 auto;
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
 nav:hover {
-	box-shadow: 5px 5px 10px 5px rgba(1, 12, 77, 0.2);
-	transition-duration: 0.5s;
+  box-shadow: 5px 5px 10px 5px rgba(1, 12, 77, 0.2);
+  transition-duration: 0.5s;
 }
 nav img {
-	width: 50px;
-	height: auto;
+  width: 50px;
+  height: auto;
 }
 
 nav ul {
-	display: flex;
-	list-style: none;
-	gap: 1.5rem;
+  display: flex;
+  list-style: none;
+  gap: 1.5rem;
+}
+
+/* CHANGE: wrapper that keeps the nav links and theme button in one aligned row */
+.nav-right {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
 }
 
 nav ul li a {
-	color: white;
-	font-size: 0.8rem;
-	transition: all ease-in-out 0.2s;
+  color: white;
+  font-size: 0.8rem;
+  transition: all ease-in-out 0.2s;
 }
 
 nav ul li a:hover {
-	color: #05f2c7;
+  color: #05f2c7;
 }
 
 .github-btn {
-	background-color: #fff;
-	color: #3d3d3d;
-	padding: 0.6rem 1rem;
-	border-radius: 3rem;
+  background-color: #fff;
+  color: #3d3d3d;
+  padding: 0.6rem 1rem;
+  border-radius: 3rem;
 }
 
 .github-btn:hover {
-	background-color: #05f2c7;
-	color: #0d4360;
+  background-color: #05f2c7;
+  color: #0d4360;
 }
 
 main {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	padding: 2rem;
-	gap: 4rem;
-	margin: 0 8rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  gap: 4rem;
+  margin: 0 8rem;
 }
 
 main .right img {
-	animation: imgUp 1s linear infinite alternate;
-	z-index: -1;
+  animation: imgUp 1s linear infinite alternate;
+  z-index: -1;
 }
 main .left {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	gap: 4rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4rem;
 }
 
 main .left .headings {
-	display: flex;
-	flex-direction: column;
-	gap: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
 }
 
 main .left h1 {
-	font-size: 4rem;
-	color: #0d4360;
-	line-height: 100%;
+  font-size: 4rem;
+  color: #0d4360;
+  line-height: 100%;
 }
 
 main .left p {
-	font-size: 0.8rem;
-	width: 90%;
-	color: #3d3d3d;
+  font-size: 0.8rem;
+  width: 90%;
+  color: #3d3d3d;
 }
 
 .github-btn-cta {
-	background-color: #0d4360;
-	color: white;
-	padding: 0.6rem 1rem;
-	border-radius: 3rem;
-	width: 12.6rem;
-	font-size: 1rem;
-	transition: all ease-in-out 0.2s;
+  background-color: #0d4360;
+  color: white;
+  padding: 0.6rem 1rem;
+  border-radius: 3rem;
+  width: 12.6rem;
+  font-size: 1rem;
+  transition: all ease-in-out 0.2s;
 }
 
 .github-btn-cta:hover {
-	background-color: #05f2c7;
-	color: #0d4360;
+  background-color: #05f2c7;
+  color: #0d4360;
 }
 
 .project-section {
-	border: 1px rgb(185, 185, 185) solid;
-	background-color: rgb(255, 255, 255);
-	/* margin-left : .6rem;
+  border: 1px rgb(185, 185, 185) solid;
+  background-color: rgb(255, 255, 255);
+  /* margin-left : .6rem;
   margin-right : .6rem; */
-	/* margin: -2.5rem 8rem 6rem 8rem; */
-	padding: 6rem;
-	/* margin-bottom:1rem ; */
-	z-index: 10000;
+  /* margin: -2.5rem 8rem 6rem 8rem; */
+  padding: 6rem;
+  /* margin-bottom:1rem ; */
+  z-index: 10000;
 }
 .project-section:hover {
-	box-shadow: 2px 2px 2px 2px rgb(163, 163, 163);
-	transition-duration: 0.5s;
+  box-shadow: 2px 2px 2px 2px rgb(163, 163, 163);
+  transition-duration: 0.5s;
 }
 
 .title {
-	color: #0d4360;
-	font-size: 3rem;
-	margin-top: -6rem;
+  color: #0d4360;
+  font-size: 3rem;
+  margin-top: -6rem;
 }
 
 .bg-title {
-	font-size: 6rem;
-	color: rgb(234, 233, 233);
-	margin-left: -6rem;
+  font-size: 6rem;
+  color: rgb(234, 233, 233);
+  margin-left: -6rem;
 }
 
 @keyframes imgUp {
-	to {
-		transform: translateY(-10px);
-	}
+  to {
+    transform: translateY(-10px);
+  }
 }
 
 .projects {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	margin-top: 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 2rem;
 }
 
 .project-header {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .project-header #searchForm {
-	height: fit-content;
-	width: fit-content;
-	padding: 1rem;
-	margin: 0.5rem;
-	text-align: center;
-	border: 2px solid #0d4360;
-	border-radius: 1rem;
+  height: fit-content;
+  width: fit-content;
+  padding: 1rem;
+  margin: 0.5rem;
+  text-align: center;
+  border: 2px solid #0d4360;
+  border-radius: 1rem;
 }
 .project-header #searchForm:hover {
-	border: 2px solid #0d4360a0;
-	transition-duration: 0.5s;
+  border: 2px solid #0d4360a0;
+  transition-duration: 0.5s;
 }
 
 .project-header #search {
-	font-size: 1rem;
-	margin: 0;
-	padding: 0;
-	border: 0px;
+  font-size: 1rem;
+  margin: 0;
+  padding: 0;
+  border: 0px;
 }
 
 .project-header #search:hover,
 .project-header #search:focus {
-	border: 0px;
-	outline: none;
+  border: 0px;
+  outline: none;
 }
 
 .project-header button {
-	font-size: 1rem;
-	background-color: white;
-	margin: 0;
-	padding: 0;
-	border: 0px;
+  font-size: 1rem;
+  background-color: white;
+  margin: 0;
+  padding: 0;
+  border: 0px;
 }
 
 #searchForm button {
@@ -667,340 +822,340 @@ main .left p {
 }
 
 .project {
-	display: flex;
-	width: 30%;
-	flex-direction: column;
-	align-items: center;
-	margin-top: 4rem;
-	background-color: #0d4360;
-	border-radius: 0.2rem;
-	transition: all 0.5s ease;
+  display: flex;
+  width: 30%;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 4rem;
+  background-color: #0d4360;
+  border-radius: 0.2rem;
+  transition: all 0.5s ease;
 }
 
 .project:hover {
-	scale: 1.01;
-	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  scale: 1.01;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
 }
 
 .project img {
-	width: 100%;
-	height: auto;
-	transition: all ease-in-out 0.2s;
-	border-top-left-radius: 0.2rem;
-	border-top-right-radius: 0.2rem;
+  width: 100%;
+  height: auto;
+  transition: all ease-in-out 0.2s;
+  border-top-left-radius: 0.2rem;
+  border-top-right-radius: 0.2rem;
 }
 
 .project-info {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	gap: 1rem;
-	color: white;
-	width: 100%;
-	padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  color: white;
+  width: 100%;
+  padding: 1rem;
 }
 
 .project-info h2 {
-	font-size: 1.4rem;
-	width: 90%;
+  font-size: 1.4rem;
+  width: 90%;
 }
 
 .project-info p {
-	font-size: 0.9rem;
-	text-align: justify;
-	width: 90%;
+  font-size: 0.9rem;
+  text-align: justify;
+  width: 90%;
 }
 
 .project-info .row {
-	display: flex;
-	justify-content: space-between;
-	padding: 0 1rem;
-	gap: 1.3rem;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 1rem;
+  gap: 1.3rem;
 }
 
 .row {
-	display: flex;
-	width: 100%;
-	justify-content: space-between;
-	padding: 0 1rem;
-	gap: 1.3rem;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 1rem;
+  gap: 1.3rem;
 }
 
 .tech span {
-	border: 1px solid #05f2c7;
-	color: #05f2c7;
-	padding: 0.4rem 0.7rem;
-	border-radius: 0.2rem;
-	font-size: 0.8rem;
-	margin-right: 0.2rem;
+  border: 1px solid #05f2c7;
+  color: #05f2c7;
+  padding: 0.4rem 0.7rem;
+  border-radius: 0.2rem;
+  font-size: 0.8rem;
+  margin-right: 0.2rem;
 }
 
 .links {
-	display: flex;
-	gap: 0.5rem;
-	font-size: 1rem;
+  display: flex;
+  gap: 0.5rem;
+  font-size: 1rem;
 }
 
 .links a {
-	color: white;
+  color: white;
 }
 
 .links a:hover {
-	color: #05f2c7;
+  color: #05f2c7;
 }
 
 .contributors {
-	/* margin: -2.5rem 8rem 4rem 8rem; */
-	margin: 8rem;
-	border: 1px solid white;
-	background-color: white;
+  /* margin: -2.5rem 8rem 4rem 8rem; */
+  margin: 8rem;
+  border: 1px solid white;
+  background-color: white;
 }
 
 .contributors .list-section {
-	margin-top: 4rem;
-	padding: 2rem;
-	background-color: #0d4360;
-	border-radius: 0.5rem;
+  margin-top: 4rem;
+  padding: 2rem;
+  background-color: #0d4360;
+  border-radius: 0.5rem;
 }
 
 #contributors-list {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 1rem;
-	margin: 0 auto;
-	list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+  margin: 0 auto;
+  list-style: none;
 }
 
 #contributors-list img {
-	width: 60px;
-	border-radius: 50%;
-	border: 2px solid #05f2c7;
+  width: 60px;
+  border-radius: 50%;
+  border: 2px solid #05f2c7;
 }
 
 #contributors-list img:hover {
-	transform: scale(1.14);
-	cursor: pointer;
+  transform: scale(1.14);
+  cursor: pointer;
 }
 
 footer {
-	background-color: #0d4360;
-	padding: 2rem 8rem;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	color: #fff;
+  background-color: #0d4360;
+  padding: 2rem 8rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #fff;
 }
 
 footer a {
-	color: #05f2c7;
+  color: #05f2c7;
 }
 
 @media screen and (max-width: 1200px) {
-	main {
-		flex-direction: column-reverse;
-		margin: 0 4rem;
-	}
-	main .left {
-		margin: 4rem;
-	}
-	main .left h1 {
-		font-size: 3rem;
-	}
-	main .left p {
-		font-size: 0.7rem;
-	}
-	.project-section {
-		margin: -2.5rem 3rem 4rem 3rem;
-		padding: 4rem;
-	}
-	.title {
-		font-size: 2.5rem;
-		margin-top: -5rem;
-	}
-	.bg-title {
-		font-size: 6rem;
-		margin-left: -4rem;
-	}
-	.projects {
-		margin: 4rem 1rem;
-		justify-content: space-evenly;
-	}
-	.project {
-		width: 45%;
-		margin: 1rem;
-	}
-	.project-header {
-		flex-direction: column;
-		gap: 2rem;
-		align-items: unset;
-		margin: 4rem 2rem;
-	}
-	.project-header #searchForm {
-		width: 100%;
-		display: flex;
-		justify-content: space-between;
-		margin: 0;
-		padding: 1rem;
-	}
-	.project-info h2 {
-		font-size: 1rem;
-	}
-	.project-info p {
-		font-size: 0.6rem;
-	}
-	.project-info .row {
-		padding: 0 0.5rem;
-	}
-	.tech span {
-		font-size: 0.6rem;
-	}
-	.links {
-		font-size: 0.8rem;
-	}
-	footer {
-		padding: 2rem 4rem;
-	}
+  main {
+    flex-direction: column-reverse;
+    margin: 0 4rem;
+  }
+  main .left {
+    margin: 4rem;
+  }
+  main .left h1 {
+    font-size: 3rem;
+  }
+  main .left p {
+    font-size: 0.7rem;
+  }
+  .project-section {
+    margin: -2.5rem 3rem 4rem 3rem;
+    padding: 4rem;
+  }
+  .title {
+    font-size: 2.5rem;
+    margin-top: -5rem;
+  }
+  .bg-title {
+    font-size: 6rem;
+    margin-left: -4rem;
+  }
+  .projects {
+    margin: 4rem 1rem;
+    justify-content: space-evenly;
+  }
+  .project {
+    width: 45%;
+    margin: 1rem;
+  }
+  .project-header {
+    flex-direction: column;
+    gap: 2rem;
+    align-items: unset;
+    margin: 4rem 2rem;
+  }
+  .project-header #searchForm {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 1rem;
+  }
+  .project-info h2 {
+    font-size: 1rem;
+  }
+  .project-info p {
+    font-size: 0.6rem;
+  }
+  .project-info .row {
+    padding: 0 0.5rem;
+  }
+  .tech span {
+    font-size: 0.6rem;
+  }
+  .links {
+    font-size: 0.8rem;
+  }
+  footer {
+    padding: 2rem 4rem;
+  }
 }
 
 @media screen and (max-width: 768px) {
-	nav ul li a {
-		font-size: 0.7rem;
-	}
-	.github-btn {
-		margin-top: 1rem;
-	}
-	main {
-		flex-direction: column-reverse;
-		margin: 0 2rem;
-		gap: 0rem;
-	}
-	main .left {
-		margin-top: 4rem;
-	}
-	main .left h1 {
-		font-size: 3rem;
-	}
-	main .left p {
-		font-size: 1rem;
-	}
-	main .right img {
-		height: 40vh;
-	}
-	.github-btn-cta {
-		margin-bottom: 2rem;
-	}
-	.project-section {
-		margin: -2.5rem 2rem 4rem 2rem;
-	}
-	.title {
-		font-size: 2rem;
-		margin-top: -3rem;
-	}
-	.bg-title {
-		font-size: 4rem;
-		margin-left: -2rem;
-	}
-	.projects {
-		margin-top: 1rem;
-	}
-	.project {
-		width: 90%;
-	}
-	.project-header #searchForm {
-		padding: 1rem;
-	}
-	.project-info h2 {
-		font-size: 1.2rem;
-	}
-	.project-info p {
-		font-size: 1rem;
-	}
-	.project-info .row {
-		padding: 0 0.5rem;
-	}
-	.tech span {
-		font-size: 0.8rem;
-	}
-	.links {
-		font-size: 1rem;
-	}
-	.contributors {
-		margin: 1rem;
-	}
-	footer {
-		flex-direction: column;
-		padding: 2rem 2rem;
-	}
-	.project-header {
-		flex-direction: column;
-	}
-	.project-header button,
-	.project-header #search {
-		font-size: 0.8rem;
-	}
+  nav ul li a {
+    font-size: 0.7rem;
+  }
+  .github-btn {
+    margin-top: 1rem;
+  }
+  main {
+    flex-direction: column-reverse;
+    margin: 0 2rem;
+    gap: 0rem;
+  }
+  main .left {
+    margin-top: 4rem;
+  }
+  main .left h1 {
+    font-size: 3rem;
+  }
+  main .left p {
+    font-size: 1rem;
+  }
+  main .right img {
+    height: 40vh;
+  }
+  .github-btn-cta {
+    margin-bottom: 2rem;
+  }
+  .project-section {
+    margin: -2.5rem 2rem 4rem 2rem;
+  }
+  .title {
+    font-size: 2rem;
+    margin-top: -3rem;
+  }
+  .bg-title {
+    font-size: 4rem;
+    margin-left: -2rem;
+  }
+  .projects {
+    margin-top: 1rem;
+  }
+  .project {
+    width: 90%;
+  }
+  .project-header #searchForm {
+    padding: 1rem;
+  }
+  .project-info h2 {
+    font-size: 1.2rem;
+  }
+  .project-info p {
+    font-size: 1rem;
+  }
+  .project-info .row {
+    padding: 0 0.5rem;
+  }
+  .tech span {
+    font-size: 0.8rem;
+  }
+  .links {
+    font-size: 1rem;
+  }
+  .contributors {
+    margin: 1rem;
+  }
+  footer {
+    flex-direction: column;
+    padding: 2rem 2rem;
+  }
+  .project-header {
+    flex-direction: column;
+  }
+  .project-header button,
+  .project-header #search {
+    font-size: 0.8rem;
+  }
 }
 
 @media screen and (max-width: 480px) {
-	nav ul li a {
-		font-size: 0.7rem;
-	}
-	.github-btn {
-		display: none;
-	}
-	main {
-		flex-direction: column-reverse;
-		margin: 0 1rem;
-		gap: 0rem;
-	}
-	main .left {
-		margin-top: 4rem;
-	}
-	main .left h1 {
-		font-size: 2rem;
-	}
-	main .left p {
-		font-size: 0.8rem;
-	}
-	main .right img {
-		height: 30vh;
-	}
-	.project-section {
-		margin: -2.5rem 1rem 4rem 1rem;
-		padding: 0;
-	}
-	.title {
-		font-size: 1.5rem;
-		margin-top: -2rem;
-	}
-	.bg-title {
-		font-size: 3rem;
-		margin-left: -1rem;
-	}
-	.projects {
-		margin: 0rem;
-	}
-	.project-info h2 {
-		font-size: 1rem;
-	}
-	.project-info p {
-		font-size: 0.8rem;
-	}
-	.project-info .row {
-		padding: 0 0.5rem;
-	}
-	.contributors {
-		margin: 0rem;
-	}
-	.tech span {
-		font-size: 0.6rem;
-	}
-	.links {
-		font-size: 0.8rem;
-	}
-	footer {
-		flex-direction: column;
-		padding: 2rem 1rem;
-	}
+  nav ul li a {
+    font-size: 0.7rem;
+  }
+  .github-btn {
+    display: none;
+  }
+  main {
+    flex-direction: column-reverse;
+    margin: 0 1rem;
+    gap: 0rem;
+  }
+  main .left {
+    margin-top: 4rem;
+  }
+  main .left h1 {
+    font-size: 2rem;
+  }
+  main .left p {
+    font-size: 0.8rem;
+  }
+  main .right img {
+    height: 30vh;
+  }
+  .project-section {
+    margin: -2.5rem 1rem 4rem 1rem;
+    padding: 0;
+  }
+  .title {
+    font-size: 1.5rem;
+    margin-top: -2rem;
+  }
+  .bg-title {
+    font-size: 3rem;
+    margin-left: -1rem;
+  }
+  .projects {
+    margin: 0rem;
+  }
+  .project-info h2 {
+    font-size: 1rem;
+  }
+  .project-info p {
+    font-size: 0.8rem;
+  }
+  .project-info .row {
+    padding: 0 0.5rem;
+  }
+  .contributors {
+    margin: 0rem;
+  }
+  .tech span {
+    font-size: 0.6rem;
+  }
+  .links {
+    font-size: 0.8rem;
+  }
+  footer {
+    flex-direction: column;
+    padding: 2rem 1rem;
+  }
 }
diff --git a/theme.js b/theme.js
new file mode 100644
index 000000000..a764761c9
--- /dev/null
+++ b/theme.js
@@ -0,0 +1,48 @@
+(function () {
+  const STORAGE_KEY = "theme";
+  const DARK_CLASS = "dark-mode";
+
+  function applySavedTheme() {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved === "dark") {
+      document.body.classList.add(DARK_CLASS);
+    }
+  }
+
+  function syncButtonIcon(btn) {
+    const icon = btn.querySelector("i");
+    const isDark = document.body.classList.contains(DARK_CLASS);
+    if (isDark) {
+      icon.classList.replace("fa-moon", "fa-sun");
+      btn.setAttribute("aria-label", "Switch to light mode");
+      btn.setAttribute("title", "Switch to light mode");
+    } else {
+      icon.classList.replace("fa-sun", "fa-moon");
+      btn.setAttribute("aria-label", "Switch to dark mode");
+      btn.setAttribute("title", "Switch to dark mode");
+    }
+  }
+
+  function toggleTheme(btn) {
+    document.body.classList.toggle(DARK_CLASS);
+    const isDark = document.body.classList.contains(DARK_CLASS);
+    localStorage.setItem(STORAGE_KEY, isDark ? "dark" : "light");
+    syncButtonIcon(btn);
+  }
+
+  // Run on DOM ready
+  document.addEventListener("DOMContentLoaded", function () {
+    applySavedTheme();
+
+    const btn = document.getElementById("theme-toggle-btn");
+    if (!btn) return;
+
+    syncButtonIcon(btn);
+
+    btn.addEventListener("click", function () {
+      toggleTheme(btn);
+    });
+  });
+
+  applySavedTheme();
+})();
