fix(component): visual bug in auto dark mode

netless-io · May 20, 2022 · 9e8a586 · 9e8a586
1 parent 8a0efa6
commit 9e8a586
Showing 1 changed file with 12 additions and 10 deletions.
diff --git a/packages/flat-components/src/components/FlatThemeProvider/useDarkMode.ts b/packages/flat-components/src/components/FlatThemeProvider/useDarkMode.ts
@@ -3,19 +3,21 @@ import { useIsomorphicLayoutEffect } from "react-use";
 
 export type FlatPrefersColorScheme = "auto" | "dark" | "light";
 
+const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+
 export function useDarkMode(prefersColorScheme?: FlatPrefersColorScheme): boolean {
-    const [darkMode, setDarkMode] = useState(prefersColorScheme === "dark");
+    const [darkMode, setDarkMode] = useState(() =>
+        prefersColorScheme === "auto" && prefersDark
+            ? prefersDark.matches
+            : prefersColorScheme === "dark",
+    );
 
     useIsomorphicLayoutEffect(() => {
-        if (prefersColorScheme === "auto") {
-            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-            if (prefersDark) {
-                setDarkMode(prefersDark.matches);
-                const handler = (evt: MediaQueryListEvent): void => setDarkMode(evt.matches);
-                prefersDark.addListener(handler);
-                return () => prefersDark.removeListener(handler);
-            }
-            return;
+        if (prefersColorScheme === "auto" && prefersDark) {
+            setDarkMode(prefersDark.matches);
+            const handler = (evt: MediaQueryListEvent): void => setDarkMode(evt.matches);
+            prefersDark.addEventListener("change", handler);
+            return () => prefersDark.removeEventListener("change", handler);
         } else {
             setDarkMode(prefersColorScheme === "dark");
             return;