--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mrjunejune/src/index.js	Thu Jan 01 13:01:10 2026 -0800
@@ -0,0 +1,50 @@
+const THEME_STORAGE_KEY = 'theme-preference';
+// Get stored preference or detect system preference
+function getThemePreference()
+{
+  const stored = localStorage.getItem(THEME_STORAGE_KEY);
+  if (stored) {
+    return stored;
+  }
+  return 'auto';
+}
+
+function applyTheme(preference)
+{
+  const root = document.documentElement;
+
+  if (preference === 'light') {
+    root.classList.remove('dark', 'auto');
+    root.classList.add('light-mode');
+  } else if (preference === 'dark') {
+    root.classList.remove('light-mode', 'auto');
+    root.classList.add('dark');
+  } else {
+    // Auto - remove manual overrides and let CSS media query handle it
+    root.classList.remove('light-mode', 'dark');
+    root.classList.add('auto');
+  }
+}
+
+(function() {
+  const currentPreference = getThemePreference();
+  applyTheme(currentPreference);
+})();
+
+/* Toggle lights auto and dark */
+const toggle = document.querySelector('#themeToggle');
+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(THEME_STORAGE_KEY, preference);
+  applyTheme(preference);
+});