fix: useTheme values

fix useTheme() values is not working after mount

Author: programming-with-ia

src/components/random.tsx

@@ -2,30 +2,25 @@ import { useEffect, useState } from "react";
 import { Button } from "./ui/button";
 import { createRandomTheme } from "../lib/create-theme-config";
 import { useTheme } from "next-themes";
-import {
-  getComputedHSLColor,
-  saveTheme,
-} from "../lib/utils";
+import { getComputedHSLColor, saveTheme } from "../lib/utils";
 import { Dices, Lock, UnLock } from "./icons";
 import { SystemThemes, themeModes, ThemeWithHSLColor } from "../lib/theme";
 import { themeEmittor } from "../lib/emittors";
+import { useIsMount } from "../hooks/useIsMount";
 
 function RandomBtn() {
-  const {
-    resolvedTheme: NresolvedTheme = "" + undefined,
-    systemTheme: NsystemTheme = "dark",
-  } = useTheme();
-  const [resolvedTheme, setResolvedTheme] = useState<string>();
-  const [systemTheme, setSystemTheme] = useState<string>();
-  useEffect(() => {
-    setResolvedTheme(NresolvedTheme);
-    setSystemTheme(NsystemTheme);
-  }, [NresolvedTheme, NsystemTheme]);
+  const { resolvedTheme = "" + undefined, systemTheme = "dark" } = useTheme();
+
+  const isMount = useIsMount();
   const [lockPrimary, setLockPrimary] = useState(true);
+
+  if (!isMount) return null;
+
   const onClickHandler = () => {
     const themes = createRandomTheme(
       lockPrimary ? getComputedHSLColor("--primary") : undefined
     );
+
     let theme;
 
     if (SystemThemes.includes(resolvedTheme as any)) {
@@ -37,7 +32,9 @@ function RandomBtn() {
     }
     themeEmittor.applyTheme(theme);
   };
+
   const LockIcon = lockPrimary ? Lock : UnLock;
+
   return (
     <Button
       onClick={onClickHandler}

src/components/theme-toggle.tsx

@@ -1,45 +1,37 @@
 import { useTheme } from "next-themes";
 import { cn } from "../lib/utils";
 import { SVGProps, useEffect, useRef, useState } from "react";
+import { useIsMount } from "../hooks/useIsMount";
 
 export default function ThemeToggle() {
   const { theme, setTheme } = useTheme();
-  const [CurrentTheme, setCurrentTheme] = useState<string | undefined>();
-  useEffect(() => {
-    setCurrentTheme(theme);
-  }, [theme]);
+  const isMount = useIsMount()
+
+  if (!isMount) return null;
 
-  function getClasses(isCurrentTheme: boolean) {
-    return cn(
-      "rounded-full p-2",
-      isCurrentTheme
-        ? "bg-primary text-primary-foreground"
-        : "hover:bg-accent hover:text-accent-foreground"
-    );
-  }
   return (
     <div className="flex items-center gap-2 p-1 rounded-full border bg-background text-foreground w-fit">
-      <button
-        onClick={() => setTheme("light")}
-        aria-label="Toggle light theme"
-        className={getClasses(CurrentTheme == "light")}
-      >
-        <SunIcon className="size-5" />
-      </button>
-      <button
-        onClick={() => setTheme("dark")}
-        aria-label="Toggle dark theme"
-        className={getClasses(CurrentTheme == "dark")}
-      >
-        <MoonIcon className="size-5" />
-      </button>
-      <button
-        onClick={() => setTheme("system")}
-        aria-label="Toggle system theme"
-        className={getClasses(CurrentTheme == "system")}
-      >
-        <MonitorIcon className="size-5" />
-      </button>
+      {(
+        [
+          ["light", SunIcon],
+          ["dark", MoonIcon],
+          ["system", MonitorIcon],
+        ] as const
+      ).map(([themeN, Icon]) => (
+        <button
+          className={cn(
+            "rounded-full p-2",
+            theme == themeN
+              ? "bg-primary text-primary-foreground"
+              : "hover:bg-accent hover:text-accent-foreground"
+          )}
+          aria-selected={theme == themeN || undefined}
+          onClick={() => setTheme(themeN)}
+          aria-label={`set ${themeN} theme`}
+        >
+          <Icon className="size-5" />
+        </button>
+      ))}
     </div>
   );
 }

src/hooks/useIsMount.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+
+export function useIsMount(){
+    const [isMount, setIsMount] = useState(false);
+    useEffect(() => {
+        setIsMount(true)
+    }, []);
+
+    return isMount
+}
+
+export const useIsClient = useIsMount