fix：change theme

Alicehhhmm · May 17, 2024 · a68f45c · a68f45c
1 parent 616d4ca
commit a68f45c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git 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
@@ -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>
     )
 }