feat: added a theme toggle button

assets/scss/_floating-toggle-theme.scss

@@ -0,0 +1,24 @@
+.theme-toggle-btn {
+  appearance: none;
+  -webkit-appearance: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+  outline: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform 0.3s ease;
+
+  &:hover { transform: rotate(20deg); }
+
+  .icon-moon { display: block; }
+  .icon-sun  { display: none; }
+}
+
+[data-theme="light"] .theme-toggle-btn {
+  .icon-moon { display: none; }
+  .icon-sun  { display: block; filter: brightness(0); }
+}

assets/scss/_header.scss

@@ -30,11 +30,22 @@
                 inset 0 1px 0 rgba(255, 255, 255, 0.04);
   }
   .container {
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
+    width: 100%;
+  }
+
+  .logo {
+    grid-column: 2;
+    justify-self: center;
+  }
+
+  .theme-toggle-btn {
+    grid-column: 3;
+    justify-self: end;
   }
 
   .logo {

assets/scss/_hero-glass.scss

@@ -5,11 +5,31 @@
   initial-value: 0deg;
 }
 
+@property --bg-start {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #041013;
+}
+
+@property --bg-mid {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #0a151c;
+}
+
+@property --bg-end {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #0b1c24;
+}
+
 :root {
   color-scheme: dark;
-  // --bg: #05060b;
   --text: #f5f7ff;
   --muted: rgba(222, 232, 248, 0.78);
+  --bg-start: #041013;
+  --bg-mid:   #0a151c;
+  --bg-end:   #0b1c24;
   --accent: #00B39F;
   --accent-rgba: rgba(0, 179, 159, 0.9);
   --accent-2: #00D3A9;
@@ -23,6 +43,46 @@
   --tilt-y: 0deg;
 }
 
+[data-theme="light"] {
+  color-scheme: light;
+  --text: #1a1a1a;
+  --muted: rgba(30, 30, 30, 0.7);
+  --bg-start: #d0d0d0;
+  --bg-mid:   #9d9f9f;
+  --bg-end:   #959494;
+}
+
+:root[data-theme="light"] {
+  h1, h2, h3, h4, h5, h6, p, span, a, li, strong, label, div, button {
+    color: #1a1a1a !important;
+  }
+
+  .multi-cursor__role,
+  .multi-cursor__activity,
+  .cursor-proof-pill__label,
+  .cursor-proof-activity,
+  .browser-pill,
+  .footer,
+  .footer *,
+  .browser-mockup,
+  .browser-mockup * {
+    color: #fff !important;
+  }
+
+  .cursor-proof-pill__value {
+    color: var(--accent-3) !important;
+  }
+
+  .site-header {
+    background: rgba(220, 220, 220, 0.85) !important;
+    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
+
+    &.scrolled {
+      background: rgba(200, 200, 200, 0.75) !important;
+    }
+  }
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -41,7 +101,8 @@ body {
     ),
     radial-gradient(900px circle at 85% 15%, rgba(0, 211, 169, 0.2), transparent 60%),
     radial-gradient(800px circle at 15% 80%, rgba(158, 255, 236, 0.16), transparent 55%),
-    linear-gradient(180deg, #041013 0%, #0a151c 55%, #0b1c24 100%);
+    linear-gradient(180deg, var(--bg-start) 0%, var(--bg-mid) 55%, var(--bg-end) 100%);
+  transition: background 0.8s ease-in-out, color 0.6s ease-in-out;
   overflow-x: hidden;
   position: relative;
 }

assets/scss/_styles_project.scss

@@ -18,6 +18,7 @@
 @import "feedback";
 @import "section-transitions";
 @import "scroll-cube";
+@import "floating-toggle-theme";
 
 body {
   background-color: $dark;      

layouts/partials/floating-toggle-theme.html

@@ -0,0 +1,5 @@
+<div class="theme-toggle-wrapper">
+  <button id="theme-toggler" class="theme-toggle-btn" aria-label="Toggle Dark/Light Mode">
+    <i id="theme-icon" class="fa-solid fa-moon"></i>
+  </button>
+</div>

layouts/partials/head.html

@@ -1,4 +1,5 @@
 <meta charset="UTF-8">
+  <script>document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') || 'dark');</script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">

layouts/partials/navbar.html

@@ -22,5 +22,9 @@
       </a>
       <a href="https://kanvas.new" class="btn-primary" target="_blank" rel="noreferrer">Launch Kanvas</a>
     </div> -->
+    <button id="theme-toggler" class="theme-toggle-btn" aria-label="Toggle Dark/Light Mode">
+      <img class="icon-moon" src="/images/mode-toggle-icon-moon.png" alt="Dark mode" width="28" height="28">
+      <img class="icon-sun"  src="/images/mode-toggle-icon-sun.png"  alt="Light mode" width="28" height="28">
+    </button>
   </div>
 </header>

static/scripts/main.js

@@ -575,9 +575,24 @@ const initVideoHandler = () => {
   }
 };
 
+const initThemeToggle = () => {
+    const btn = document.getElementById('theme-toggler');
+    if (!btn) return;
+
+    const saved = localStorage.getItem('theme') || 'dark';
+    document.documentElement.setAttribute('data-theme', saved);
+
+    btn.addEventListener('click', () => {
+        const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', next);
+        localStorage.setItem('theme', next);
+    });
+};
+
 document.addEventListener("DOMContentLoaded", () => {
     initMarquee();
     initScrollAnimations();
+    initThemeToggle();
     initVideoHandler();
 
     const header = document.querySelector(".site-header");