From a68f45ccd597a84bda0583afb7c347da7ef824ce Mon Sep 17 00:00:00 2001
From: huangtinghao <a123>
Date: Fri, 17 May 2024 17:37:59 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9Achange=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                    |  3 +++
 src/components/theme-toggle.tsx | 18 ++++++++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index d5fffc9..39364be 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,9 @@
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "eslint-config-prettier": "^9.1.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
index d6dd509..9da9dbe 100644
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@@ -9,15 +9,17 @@ import { Button } from "@/components/ui/button"
 export function ThemeToggle() {
     const { setTheme, theme } = useTheme()
 
+    const onHandleChange = () => {
+        setTheme(theme === "light" ? "dark" : "light")
+    }
+
     return (
-        <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-        >
-            <Sun className="h-[1.5rem] w-[1.3rem] dark:hidden" />
-            <Moon className="hidden h-5 w-5 dark:block" />
-            <span className="sr-only">Toggle theme</span>
+        <Button variant="ghost" size="icon" onClick={onHandleChange}>
+            {theme === "light" ? (
+                <Sun className="h-[1.5rem] w-[1.3rem] dark:hidden" />
+            ) : (
+                <Moon className="h-[1.5rem] w-[1.3rem] dark:hidden" />
+            )}
         </Button>
     )
 }