--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mrjunejune/pages/index.js	Wed Dec 31 14:11:21 2025 -0800
@@ -0,0 +1,62 @@
+const STORAGE_KEY = 'theme-preference';
+// Get stored preference or detect system preference
+function getThemePreference()
+{
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored) {
+    return stored;
+  }
+  return 'auto';
+}
+
+function applyTheme(preference)
+{
+  const root = document.documentElement;
+
+  if (preference === 'light') {
+    root.classList.add('light-mode');
+    root.classList.remove('dark');
+  } else if (preference === 'dark') {
+    root.classList.remove('light-mode');
+    root.classList.add('dark');
+  } else {
+    // Auto - remove manual overrides and let CSS media query handle it
+    root.classList.remove('light-mode', 'dark');
+  }
+}
+
+function populateHeader()
+{
+  fetch("/parts/headers.html")
+    .then(res => res.text())
+    .then(headerHTML => {
+      const range = document.createRange();
+      const fragment = range.createContextualFragment(headerHTML);
+      header.appendChild(fragment);
+      
+      const toggle = document.querySelector('#themeToggle');
+      if (!toggle) return;
+
+      toggle.addEventListener('click', function() {
+        let preference = getThemePreference();
+
+        // Cycle through: auto -> light -> dark -> auto
+        if (preference === 'auto') {
+          preference = 'light';
+        } else if (preference === 'light') {
+          preference = 'dark';
+        } else {
+          preference = 'auto';
+        }
+
+        localStorage.setItem(STORAGE_KEY, preference);
+        applyTheme(preference);
+      });
+    });
+}
+populateHeader();
+
+(function() {
+  const currentPreference = getThemePreference();
+  applyTheme(currentPreference);
+})();