perf: toggle theme too much render in catalog

src/components/dark-mask/index.tsx

@@ -15,7 +15,7 @@ const fadeOut = keyframes`
   }
 `;
 
-const Mask = styled.div<{ isHiding: boolean }>`
+const Mask = styled.div<{ $isHiding: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -26,7 +26,7 @@ const Mask = styled.div<{ isHiding: boolean }>`
   height: 100vh;
   background-color: rgba(59, 59, 59, 1);
   z-index: 9999;
-  animation: ${({ isHiding }) => (isHiding ? fadeOut : 'none')} ${duration}s
+  animation: ${({ $isHiding }) => ($isHiding ? fadeOut : 'none')} ${duration}s
     ease forwards;
 `;
 
@@ -79,7 +79,7 @@ const DarkModeMask = () => {
     return () => el.removeEventListener('animationend', handleAnimationEnd);
   }, [visible]);
 
-  return visible ? <Mask ref={maskRef} isHiding={isHiding}></Mask> : null;
+  return visible ? <Mask ref={maskRef} $isHiding={isHiding}></Mask> : null;
 };
 
 export default DarkModeMask;

src/hooks/use-user-settings.ts

@@ -9,6 +9,8 @@ export default function useUserSettings() {
   const { light, dark, colorPrimary } = themeConfig;
   const [userSettings, setUserSettings] = useAtom(userSettingsHelperAtom);
 
+  console.log('userSettings===', userSettings);
+
   const getCurrentTheme = (mode: Theme): 'light' | 'realDark' => {
     if (mode === 'auto') {
       return window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -46,23 +48,32 @@ export default function useUserSettings() {
     });
   };
 
-  useEffect(() => {
-    setHtmlThemeAttr(userSettings.theme);
-  }, [userSettings.theme]);
+  const initTheme = () => {
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+      .matches
+      ? 'realDark'
+      : 'light';
+    if (userSettings.mode === 'auto' && systemTheme !== userSettings.theme) {
+      setTheme('auto');
+    }
+  };
 
   useEffect(() => {
-    if (userSettings.mode !== 'auto') return;
+    initTheme();
+  }, [userSettings.theme, userSettings.mode]);
 
-    setTheme('auto');
+  useEffect(() => {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const handleChange = () => {
+      // The theme follows the system preference, when the mode is set to 'auto'
+      if (userSettings.mode !== 'auto') return;
       setTheme('auto');
     };
     mediaQuery.addEventListener('change', handleChange);
     return () => {
       mediaQuery.removeEventListener('change', handleChange);
     };
-  }, [userSettings.mode]);
+  }, [userSettings.mode, userSettings.theme]);
 
   return {
     userSettings,