feat: add new theming options

components/Navbar.tsx

@@ -26,12 +26,12 @@ export default function Navbar() {
   const { width } = useWindowDimensions();
 
   const handleToggle = () => {
-    if (settings.theme === "dark") {
-      updateSettings({ theme: "light" });
-    } else {
-      updateSettings({ theme: "dark" });
-    }
+    const [colorTheme, mode] = (settings.theme || "default-light").split('-');
+    const newMode = mode === "dark" ? "light" : "dark";
+    const newTheme = `${colorTheme}-${newMode}`;
+    updateSettings({ theme: newTheme });
   };
+  
 
   useEffect(() => {
     setSidebar(false);
@@ -135,16 +135,16 @@ export default function Navbar() {
               </Link>
             </li>
             <li>
-              <div
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  handleToggle();
-                }}
-                tabIndex={0}
-                role="button"
-              >
-                Switch to {settings.theme === "light" ? "Dark" : "Light"}
-              </div>
+                <div
+                    onClick={() => {
+                        (document?.activeElement as HTMLElement)?.blur();
+                        handleToggle();
+                    }}
+                    tabIndex={0}
+                    role="button"
+                    >
+                    Switch to {(settings.theme || "default-light").endsWith("-dark") ? "Light" : "Dark"}
+                </div>
             </li>
             <li>
               <div

components/ToggleDarkMode.tsx

@@ -2,39 +2,46 @@ import useLocalSettingsStore from "@/store/localSettings";
 import { useEffect, useState } from "react";
 
 type Props = {
-  className?: string;
+   className?: string;
 };
 
 export default function ToggleDarkMode({ className }: Props) {
-  const { settings, updateSettings } = useLocalSettingsStore();
+   const { updateSettings } = useLocalSettingsStore();
+   const [theme, setTheme] = useState('default-light');
 
-  const [theme, setTheme] = useState(localStorage.getItem("theme"));
+   useEffect(() => {
+      const storedTheme = localStorage.getItem("theme");
+      if (storedTheme) {
+         setTheme(storedTheme);
+      } else {
+         // Default theme if not set in localStorage
+         localStorage.setItem("theme", "default-light");
+         setTheme("default-light");
+      }
+      console.log("Initial theme from localStorage:", storedTheme || "default-light");
+   }, []);
 
-  const handleToggle = (e: any) => {
-    setTheme(e.target.checked ? "dark" : "light");
-  };
+   const handleToggle = () => {
+      const [currentColorTheme, currentMode] = theme.split('-');
+      const newMode = currentMode === 'light' ? 'dark' : 'light';
+      const newTheme = `${currentColorTheme}-${newMode}`;
 
-  useEffect(() => {
-    updateSettings({ theme: theme as string });
-  }, [theme]);
+      setTheme(newTheme);
+      localStorage.setItem("theme", newTheme);
+      document.documentElement.setAttribute('data-theme', newTheme);
+      updateSettings({ theme: newTheme });
+      console.log("New theme set:", newTheme);
+   };
 
-  return (
-    <div
-      className="tooltip tooltip-bottom"
-      data-tip={`Switch to ${settings.theme === "light" ? "Dark" : "Light"}`}
-    >
-      <label
-        className={`swap swap-rotate btn-square text-neutral btn btn-ghost btn-sm ${className}`}
-      >
-        <input
-          type="checkbox"
-          onChange={handleToggle}
-          className="theme-controller"
-          checked={localStorage.getItem("theme") === "light" ? false : true}
-        />
-        <i className="bi-sun-fill text-xl swap-on"></i>
-        <i className="bi-moon-fill text-xl swap-off"></i>
-      </label>
-    </div>
-  );
+   const isDarkMode = theme.endsWith('-dark');
+
+   return (
+      <div className="tooltip tooltip-bottom" data-tip={`Switch to ${isDarkMode ? "Light" : "Dark"}`}>
+         <label className={`swap swap-rotate btn-square text-neutral btn btn-ghost btn-sm ${className}`}>
+            <input type="checkbox" onChange={handleToggle} className="theme-controller" checked={isDarkMode} />
+            <i className="bi-sun-fill text-xl swap-on"></i>
+            <i className="bi-moon-fill text-xl swap-off"></i>
+         </label>
+      </div>
+   );
 }