Merge pull request #173 from Kroszborg/Simplify-theme-toggle-to-dark/light-only

fix:Simplify theme toggle to dark/light only

package.json

@@ -51,6 +51,7 @@
     "styled-components": "^6.1.12",
     "tailwind-merge": "^2.5.1",
     "tailwindcss-animate": "^1.0.7",
+    "zen-website": "file:",
     "zod": "^3.23.8"
   },
   "devDependencies": {

src/components/mode-toggle.tsx

@@ -1,33 +1,27 @@
 "use client";
-
 import { useEffect, useState } from "react";
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 import { Button } from "./ui/button";
 
 export function ModeToggle() {
-	const { theme, setTheme } = useTheme();
+    const { setTheme } = useTheme();
-
+    const [currentTheme, setCurrentTheme] = useState('light');
-	const toggleTheme = () => {
-		switch (theme) {
-			case "system":
-				setTheme("dark");
-				break;
-			case "dark":
-				setTheme("light");
-				break;
-			case "light":
-				setTheme("system");
-				break;
-		}
-	};
-
-	// prevent hydration error
     const [mounted, setMounted] = useState(false);
 
     useEffect(() => {
         setMounted(true);
-	}, []);
+        const savedTheme = localStorage.getItem('theme') || 'light';
+        setCurrentTheme(savedTheme);
+        setTheme(savedTheme);
+    }, [setTheme]);
+
+    const toggleTheme = () => {
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        setCurrentTheme(newTheme);
+        setTheme(newTheme);
+        localStorage.setItem('theme', newTheme);
+    };
 
     if (!mounted) {
         return null;
@@ -35,15 +29,11 @@ export function ModeToggle() {
 
     return (
         <Button variant="ghost" size="icon" onClick={toggleTheme}>
-			<MoonIcon
+            {currentTheme === 'light' ? (
-				className={`${theme === "system" ? "visible" : "hidden"} h-[1.2rem] w-[1.2rem]`}
+                <SunIcon className="h-[1.2rem] w-[1.2rem]" />
-			/>
+            ) : (
-			<SunIcon
+                <MoonIcon className="h-[1.2rem] w-[1.2rem]" />
-				className={`${theme === "light" ? "visible" : "hidden"} h-[1.2rem] w-[1.2rem]`}
+            )}
-			/>
-			<MoonIcon
-				className={`${theme === "dark" ? "visible" : "hidden"} h-[1.2rem] w-[1.2rem]`}
-			/>
             <span className="sr-only">Toggle theme</span>
         </Button>
     );