🐛 fix: 修正设定主题后仍然响应系统主题的bug

ant-design · Feb 13, 2023 · b44be0c · b44be0c
1 parent befe3be
commit b44be0c
Showing 1 changed file with 9 additions and 13 deletions.
diff --git a/src/containers/ThemeProvider/ThemeSwitcher.tsx b/src/containers/ThemeProvider/ThemeSwitcher.tsx
@@ -32,29 +32,25 @@ const ThemeObserver: FC<{
     }
   }, [setAppearance]);
 
-  useLayoutEffect(() => {
-    // 如果是自动的话，则去做一次匹配
-    if (themeMode === 'auto') matchBrowserTheme();
-    // 否则就明确设定亮暗色
-    else setAppearance(themeMode);
-  }, [themeMode]);
-
   // 自动监听系统主题变更
   useLayoutEffect(() => {
-    if (!darkThemeMatch) {
-      darkThemeMatch = matchThemeMode('dark');
+    // 如果不是自动，就明确设定亮暗色
+    if (themeMode !== 'auto') {
+      setAppearance(themeMode);
+      return;
     }
+    // 如果是自动的话，则去做一次匹配，并开始监听
+    setTimeout(matchBrowserTheme, 1);
 
-    if (themeMode === 'auto') {
-      setTimeout(matchBrowserTheme, 1);
+    if (!darkThemeMatch) {
+      darkThemeMatch = matchThemeMode('dark');
     }
-
     darkThemeMatch.addEventListener('change', matchBrowserTheme);
 
     return () => {
       darkThemeMatch.removeEventListener('change', matchBrowserTheme);
     };
-  }, []);
+  }, [themeMode]);
 
   return null;
 };