😅 i wanna die

yuancong-liu · May 8, 2024 · 1a0e0d3 · 1a0e0d3
1 parent 55d0db7
commit 1a0e0d3
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 55 deletions.
diff --git a/src/components/common/themeRadio/index.tsx b/src/components/common/themeRadio/index.tsx
@@ -1,22 +1,13 @@
 'use client';
 
-import { ChangeEvent, useState } from 'react';
-
-import { useColorScheme } from '~/hooks';
+import { useState } from 'react';
 
 import styles from './index.module.scss';
 
 type Theme = 'system' | 'light' | 'dark';
 
 export const ThemeRadio = () => {
   const [theme, setTheme] = useState<Theme>('system');
-  const [, setUserTheme] = useColorScheme();
-
-  const handleThemeChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const nextTheme = e.target.value as Theme;
-    setTheme(nextTheme);
-    setUserTheme(nextTheme);
-  }
 
   return (
     <div className={styles['label-group']}>
@@ -27,7 +18,7 @@ export const ThemeRadio = () => {
           value="system"
           id="theme-system"
           checked={theme === 'system'}
-          onChange={handleThemeChange}
+          onChange={() => setTheme('system')}
         />
         System
       </label>
@@ -38,7 +29,7 @@ export const ThemeRadio = () => {
           value="light"
           id="theme-light"
           checked={theme === 'light'}
-          onChange={handleThemeChange}
+          onChange={() => setTheme('light')}
         />
         Light
       </label>
@@ -49,7 +40,7 @@ export const ThemeRadio = () => {
           value="dark"
           id="theme-dark"
           checked={theme === 'dark'}
-          onChange={handleThemeChange}
+          onChange={() => setTheme('dark')}
         />
         Dark
       </label>

diff --git a/src/components/pages/home/IconsSp/index.tsx b/src/components/pages/home/IconsSp/index.tsx
@@ -3,50 +3,50 @@ import { motion } from 'framer-motion';
 import styles from './index.module.scss';
 
 export const IconsSp = () => {
-    const cMarkPath = {
-      hidden: {
-        pathLength: 0,
-        fill: 'rgba(255, 255, 255, 0)',
+  const cMarkPath = {
+    hidden: {
+      pathLength: 0,
+      fill: 'rgba(255, 255, 255, 0)',
+    },
+    visible: {
+      pathLength: [0, 1, 1],
+      fill: [
+        'rgba(255, 255, 255, 0)',
+        'rgba(255, 255, 255, 0)',
+        'rgba(255, 255, 255, 1)',
+      ],
+      transition: {
+        duration: 3,
+        ease: 'easeInOut',
       },
-      visible: {
-        pathLength: [0, 1, 1],
-        fill: [
-          'rgba(255, 255, 255, 0)',
-          'rgba(255, 255, 255, 0)',
-          'rgba(255, 255, 255, 1)',
-        ],
-        transition: {
-          duration: 3,
-          ease: 'easeInOut',
-        },
-      },
-    };
+    },
+  };
 
-    const cMark = {
-      hidden: {
-        rotate: 180,
-      },
-      visible: {
-        rotate: [180, 0, 0],
-        transition: {
-          duration: 3,
-          ease: 'easeInOut',
-        },
+  const cMark = {
+    hidden: {
+      rotate: 180,
+    },
+    visible: {
+      rotate: [180, 0, 0],
+      transition: {
+        duration: 3,
+        ease: 'easeInOut',
       },
-    };
+    },
+  };
 
-    const lYMark = {
-      hidden: {
-        opacity: 0,
-      },
-      visible: {
-        opacity: [0, 0, 1],
-        transition: {
-          duration: 3,
-          ease: 'easeInOut',
-        },
+  const lYMark = {
+    hidden: {
+      opacity: 0,
+    },
+    visible: {
+      opacity: [0, 0, 1],
+      transition: {
+        duration: 3,
+        ease: 'easeInOut',
       },
-    };
+    },
+  };
 
   return (
     <div className={styles['overall-wrapper']}>

diff --git a/src/hooks/libs/useColorScheme.ts b/src/hooks/libs/useColorScheme.ts
@@ -7,13 +7,17 @@ export const useColorScheme = () => {
   const [finalTheme, setFinalTheme] = useState<DualTheme>();
   const [preferredTheme, setPreferredTheme] = useState<DualTheme>();
 
-
   const updatePreferredTheme = useCallback((e: MediaQueryListEvent) => {
     const nextTheme = e.matches ? 'dark' : 'light';
     setPreferredTheme(nextTheme);
   }, []);
 
   useLayoutEffect(() => {
+    setPreferredTheme(
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light',
+    );
     window.matchMedia('(prefers-color-scheme: dark)').onchange =
       updatePreferredTheme;
 
@@ -22,13 +26,13 @@ export const useColorScheme = () => {
     };
   }, [updatePreferredTheme]);
 
-  const setTheme = useCallback((theme: Theme) => {
+  const setTheme = (theme: Theme) => {
     if (theme === 'system') {
       setFinalTheme(preferredTheme);
     } else {
       setFinalTheme(theme);
     }
-  }, [preferredTheme]);
+  };
 
   return [finalTheme, setTheme] as const;
 };