Convert theme toggle to dropdown with Auto/Light/Dark options - Replace checkbox with dropdown select for better UX - Add theme initializer to apply theme on app load - Auto mode switches between light/dark based on time (6 PM - 6 AM) - Update CSS styling for dropdown to match theme

Author: E1iteCoder

src/client/components/themeInitializer.js

@@ -0,0 +1,38 @@
+// Initialize theme on app load - runs before any components mount
+export function initializeTheme() {
+  // Check for old theme format and migrate if needed
+  const oldTheme = localStorage.getItem("theme");
+  if (oldTheme && !localStorage.getItem("themeMode")) {
+    // Migrate old "light"/"dark" to new format
+    if (oldTheme === "light" || oldTheme === "dark") {
+      localStorage.setItem("themeMode", oldTheme);
+      localStorage.removeItem("theme");
+    }
+  }
+  
+  const savedMode = localStorage.getItem("themeMode") || "auto";
+  
+  let theme;
+  if (savedMode === "auto") {
+    // Auto mode: dark between 6 PM (18:00) and 6 AM (06:00)
+    const hour = new Date().getHours();
+    theme = hour >= 18 || hour < 6 ? "dark" : "light";
+  } else {
+    // Manual mode: use saved preference
+    theme = savedMode; // "light" or "dark"
+  }
+  
+  // Apply theme to DOM immediately
+  const root = document.documentElement;
+  if (theme === "dark") {
+    root.setAttribute("data-theme", "dark");
+  } else {
+    root.removeAttribute("data-theme");
+  }
+  
+  return { mode: savedMode, theme };
+}
+
+// Run initialization immediately when this module loads
+initializeTheme();
+

src/client/components/themeToggle.jsx

@@ -1,57 +1,92 @@
 import React, { useEffect, useState } from "react";
 import "../styles/themeToggle.css";
 
+// Helper function to get theme based on mode
+const getThemeFromMode = (currentMode) => {
+  if (currentMode === "auto") {
+    // Auto mode: dark between 6 PM and 6 AM
+    const hour = new Date().getHours();
+    return hour >= 18 || hour < 6 ? "dark" : "light";
+  } else {
+    // Manual mode: use the selected mode directly
+    return currentMode; // "light" or "dark"
+  }
+};
+
 export default function ThemeToggle() {
-  const [theme, setTheme] = useState(() => {
-    const saved = localStorage.getItem("theme");
-    return saved ? saved : new Date().getHours() >= 18 ? "dark" : "light";
+  // Get theme mode: "auto", "light", or "dark"
+  const [mode, setMode] = useState(() => {
+    const savedMode = localStorage.getItem("themeMode");
+    return savedMode || "auto"; // Default to auto mode
   });
 
-  // 1. Apply theme to DOM and save to localStorage
+  const [theme, setTheme] = useState(() => getThemeFromMode(mode));
+
+  // 1. Apply theme to DOM
   useEffect(() => {
     const root = document.documentElement;
     if (theme === "dark") {
       root.setAttribute("data-theme", "dark");
     } else {
       root.removeAttribute("data-theme");
     }
-    localStorage.setItem("theme", theme);
   }, [theme]);
 
-  // 2. Live time updates - ONLY if no saved user preference
+  // 2. Update theme when mode changes
   useEffect(() => {
-    const interval = setInterval(() => {
-      const saved = localStorage.getItem("theme");
-      // Skip if user has manually set a preference
-      if (saved && !saved.startsWith("auto-")) return;
-      
+    const newTheme = getThemeFromMode(mode);
+    setTheme(newTheme);
+    
+    // Save mode preference
+    localStorage.setItem("themeMode", mode);
+  }, [mode]);
+
+  // 3. Auto-update theme based on time (only in auto mode)
+  useEffect(() => {
+    if (mode !== "auto") return; // Only run in auto mode
+
+    // Update immediately on mount
+    const updateTheme = () => {
       const hour = new Date().getHours();
       const newTheme = hour >= 18 || hour < 6 ? "dark" : "light";
-      
-      // Only update if different from current
       if (newTheme !== theme) {
         setTheme(newTheme);
       }
-    }, 60000); // Check every minute
+    };
+
+    updateTheme(); // Initial update
+
+    // Check every minute for time-based changes
+    const interval = setInterval(updateTheme, 60000);
 
     return () => clearInterval(interval);
-  }, [theme]); // Re-run if theme changes manually
+  }, [mode, theme]);
 
-  const toggleTheme = () => {
-    // Clear auto mode when user manually toggles
-    localStorage.removeItem("theme");
-    setTheme(theme === "dark" ? "light" : "dark");
+  const handleModeChange = (e) => {
+    const newMode = e.target.value;
+    setMode(newMode);
+  };
+
+  // Get display label for auto option
+  const getAutoLabel = () => {
+    if (mode === "auto") {
+      return `Auto (${theme === "dark" ? "Dark" : "Light"})`;
+    }
+    return "Auto";
   };
 
   return (
-    <label className="theme-toggle">
-      <input
-        type="checkbox"
-        checked={theme === "dark"}
-        onChange={toggleTheme}
-      />
-      <span className="slider" />
-      <span className="label">{theme === "dark" ? "Dark" : "Light"}</span>
-    </label>
+    <div className="theme-toggle">
+      <select
+        className="theme-select"
+        value={mode}
+        onChange={handleModeChange}
+        aria-label="Select theme mode"
+      >
+        <option value="auto">{getAutoLabel()}</option>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+      </select>
+    </div>
   );
 }

src/client/styles/themeToggle.css

@@ -1,43 +1,34 @@
-/* src/components/ThemeToggle.css */
+/* Theme Toggle Dropdown Styles */
 .theme-toggle {
   display: inline-flex;
   align-items: center;
-  cursor: pointer;
-}
-.theme-toggle input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.theme-toggle .slider {
-  width: 2rem;
-  height: 1rem;
-  background: #ccc;
-  border-radius: 1rem;
-  position: relative;
-  margin-right: 0.5rem;
-  transition: background 0.3s;
 }
-.theme-toggle .slider::before {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 0.8rem;
-  height: 0.8rem;
-  background: white;
-  border-radius: 50%;
-  transition: transform 0.3s;
+
+.theme-select {
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
+  border: 1px solid var(--fg);
+  border-radius: 0.5rem;
+  background: var(--card);
+  color: var(--fg);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  outline: none;
+  min-width: 120px;
 }
-/* when checked, slide the circle and darken track */
-.theme-toggle input:checked + .slider {
-  background: #4ca1af;
+
+.theme-select:hover {
+  border-color: var(--accent);
+  background: var(--card-hover);
 }
-.theme-toggle input:checked + .slider::before {
-  transform: translateX(1rem);
+
+.theme-select:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(76, 161, 175, 0.2);
 }
-.theme-toggle .label {
-  font-size: 0.9rem;
-  user-select: none;
+
+.theme-select option {
+  background: var(--card);
+  color: var(--fg);
+  padding: 0.5rem;
 }

src/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./client/app";
+import "./client/components/themeInitializer"; // Initialize theme on app load
 
 const root = createRoot(document.getElementById("root"));
 root.render(