ucla-imls-open-sci
diff --git a/‎src/components/Navbar.astro‎
Lines changed: 37 additions & 0 deletions b/‎src/components/Navbar.astro‎
Lines changed: 37 additions & 0 deletions
diff --git a/‎src/layouts/Layout.astro‎
Lines changed: 22 additions & 0 deletions b/‎src/layouts/Layout.astro‎
Lines changed: 22 additions & 0 deletions
@@ -39,7 +39,44 @@ const navLinks = (navData as any)[siteConfig.locale]?.nav || [];
             )}
           </li>
         ))}
+        <!-- Dark Mode Toggle -->
+        <li class="nav-item d-flex align-items-center">
+          <div class="theme-switch-wrapper ml-3">
+            <label class="theme-switch" for="checkbox" style="margin-bottom: 0;">
+              <input type="checkbox" id="checkbox" />
+              <div class="slider round"></div>
+            </label>
+          </div>
+        </li>
       </ul>
     </div>
   </div>
 </nav>
+
+<script>
+  function initToggle() {
+    const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
+    if (!toggleSwitch) return;
+
+    // Sync toggle with current document state
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    if (currentTheme === 'dark') {
+        (toggleSwitch as HTMLInputElement).checked = true;
+    }
+
+    // Handle clicks
+    toggleSwitch.addEventListener('change', (e) => {
+        const isChecked = (e.target as HTMLInputElement).checked;
+        const newTheme = isChecked ? 'dark' : 'light';
+        
+        document.documentElement.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+    });
+  }
+
+  // Run on load
+  initToggle();
+
+  // Run on Astro navigation
+  document.addEventListener('astro:after-swap', initToggle);
+</script>
@@ -25,6 +25,28 @@ const { title, description } = Astro.props;
     <!-- Bootstrap & FontAwesome -->
     <link href="/assets/css/bootstrap.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    
+    <!-- Theme Script (Prevent FOUC) -->
+    <script is:inline>
+      (function() {
+        try {
+          const localTheme = localStorage.getItem('theme');
+          const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
+          
+          // Determine theme: localStorage > system preference > default (light)
+          let theme = localTheme;
+          if (!theme && supportDarkMode) {
+             theme = 'dark';
+          }
+          
+          if (theme) {
+            document.documentElement.setAttribute('data-theme', theme);
+          }
+        } catch (e) {
+          console.error("Theme init failed", e);
+        }
+      })();
+    </script>
   </head>
   <body id="page-top">
     <Navbar />