style: extract logic

StarHeartHunt · Dec 3, 2023 · 0d1856d · 0d1856d
1 parent d151140
commit 0d1856d
Showing 1 changed file with 13 additions and 11 deletions.
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
@@ -11,11 +11,20 @@ type Props = {
 export default function ThemeSwitcher({ dayIcon, nightIcon }: Props) {
   const [theme, setTheme] = useState("light");
 
-  function updateClass(mode: string) {
-    if (mode === "light") document.documentElement.classList.remove("dark");
+  function updateClass(toTheme: string) {
+    if (toTheme === "light") document.documentElement.classList.remove("dark");
     else document.documentElement.classList.add("dark");
   }
 
+  const reverseTheme = () => (theme === "dark" ? "light" : "dark");
+
+  function syncTheme() {
+    const toTheme = reverseTheme();
+    setTheme(toTheme);
+    localStorage.setItem("starheart-color-scheme", toTheme);
+    updateClass(toTheme);
+  }
+
   useEffect(() => {
     const toTheme = localStorage.getItem("starheart-color-scheme") || "light";
     setTheme(toTheme);
@@ -28,9 +37,7 @@ export default function ThemeSwitcher({ dayIcon, nightIcon }: Props) {
       !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
     if (!isAppearanceTransition) {
-      const toTheme = theme === "dark" ? "light" : "dark";
-      setTheme(toTheme);
-      updateClass(toTheme);
+      syncTheme();
       return;
     }
 
@@ -41,12 +48,7 @@ export default function ThemeSwitcher({ dayIcon, nightIcon }: Props) {
       Math.max(y, innerHeight - y),
     );
     // @ts-expect-error: Transition API
-    const transition = document.startViewTransition(() => {
-      const toTheme = theme === "dark" ? "light" : "dark";
-      setTheme(toTheme);
-      localStorage.setItem("starheart-color-scheme", toTheme);
-      updateClass(toTheme);
-    });
+    const transition = document.startViewTransition(() => syncTheme());
     transition.ready.then(() => {
       const clipPath = [
         `circle(0px at ${x}px ${y}px)`,