From 33619bcf691ab75c477e261bca96a4dca6385180 Mon Sep 17 00:00:00 2001
From: Abhiman panwar <abhimanpanwar6@gmail.com>
Date: Thu, 12 Sep 2024 23:33:17 +0530
Subject: [PATCH] Simplify theme toggle to dark/light only

- Remove system theme option
- Refactor ModeToggle component for immediate theme switching
- Implement local state management for smoother transitions
- Persist theme preference in localStorage
- Update icon display logic for better visual feedback

This commit addresses the issue of delayed theme switching and
simplifies the user experience by offering only dark and light modes.
---
 package.json                   |  1 +
 src/components/mode-toggle.tsx | 68 +++++++++++++++-------------------
 2 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index 4e230ee..229d41b 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
index f4ac64f..ef4e1e8 100644
--- a/src/components/mode-toggle.tsx
+++ b/src/components/mode-toggle.tsx
@@ -1,50 +1,40 @@
 "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 [mounted, setMounted] = useState(false);
 
-	const toggleTheme = () => {
-		switch (theme) {
-			case "system":
-				setTheme("dark");
-				break;
-			case "dark":
-				setTheme("light");
-				break;
-			case "light":
-				setTheme("system");
-				break;
-		}
-	};
+    useEffect(() => {
+        setMounted(true);
+        const savedTheme = localStorage.getItem('theme') || 'light';
+        setCurrentTheme(savedTheme);
+        setTheme(savedTheme);
+    }, [setTheme]);
 
-	// prevent hydration error
-	const [mounted, setMounted] = useState(false);
+    const toggleTheme = () => {
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        setCurrentTheme(newTheme);
+        setTheme(newTheme);
+        localStorage.setItem('theme', newTheme);
+    };
 
-	useEffect(() => {
-		setMounted(true);
-	}, []);
+    if (!mounted) {
+        return null;
+    }
 
-	if (!mounted) {
-		return null;
-	}
-
-	return (
-		<Button variant="ghost" size="icon" onClick={toggleTheme}>
-			<MoonIcon
-				className={`${theme === "system" ? "visible" : "hidden"} h-[1.2rem] w-[1.2rem]`}
-			/>
-			<SunIcon
-				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>
-	);
-}
+    return (
+        <Button variant="ghost" size="icon" onClick={toggleTheme}>
+            {currentTheme === 'light' ? (
+                <SunIcon className="h-[1.2rem] w-[1.2rem]" />
+            ) : (
+                <MoonIcon className="h-[1.2rem] w-[1.2rem]" />
+            )}
+            <span className="sr-only">Toggle theme</span>
+        </Button>
+    );
+}
\ No newline at end of file