update theme button

appujet · Oct 6, 2024 · 43defa7 · 43defa7
1 parent c42df9a
commit 43defa7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 19 deletions.
diff --git a/.hintrc b/.hintrc
@@ -11,6 +11,8 @@
       }
     ],
     "no-inline-styles": "off",
-    "typescript-config/is-valid": "off"
+    "typescript-config/is-valid": "off",
+    "button-type": "off",
+    "axe/structure": "off"
   }
 }
diff --git a/apps/web/src/components/theme/ThemeButton.tsx b/apps/web/src/components/theme/ThemeButton.tsx
@@ -1,27 +1,20 @@
-"use client"
+"use client";
+
 import { useState, useEffect } from "react";
 import { useTheme } from "next-themes";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
 
-
 export default function ThemeButton() {
     const [mounted, setMounted] = useState(false);
     const { theme, setTheme } = useTheme();
 
-
     useEffect(() => {
-        const storedTheme = localStorage.getItem("theme");
-        if (storedTheme) {
-            setTheme(storedTheme);
-        }
-
+        setTheme(localStorage.getItem("theme") || "light");  // Default to light theme
         setMounted(true);
-    }, []);
+    }, [setTheme]);
 
-    if (!mounted) {
-        return null;
-    }
+    if (!mounted) return null;
 
     const handleThemeToggle = () => {
         const newTheme = theme === "light" ? "dark" : "light";
@@ -32,14 +25,15 @@ export default function ThemeButton() {
     return (
         <div className="flex justify-center">
             <button
-                className="flex items-center justify-center w-10 h-10 rounded-full focus:outline-none"
+                className={`flex items-center justify-center w-10 h-10 rounded-full focus:outline-none 
+                    ${theme === "light" ? "bg-gray-200/50 hover:bg-gray-300" : "bg-gray-700/50 hover:bg-gray-900"}`}
                 onClick={handleThemeToggle}
+                aria-label="Toggle theme"
             >
-                {theme === "light" ? (
-                    <FontAwesomeIcon icon={faMoon as any} className="text-dark-500  h-5 w-5" />
-                ) : (
-                    <FontAwesomeIcon icon={faSun as any} className="text-yellow-500  h-5 w-5" />
-                )}
+                <FontAwesomeIcon
+                    icon={theme === "light" ? faMoon : faSun}
+                    className={`h-5 w-5 ${theme === "light" ? "text-dark-500" : "text-yellow-500"}`}
+                />
             </button>
         </div>
     );