From 9e8a586c506ecaf78406931221ccccd1eed6d388 Mon Sep 17 00:00:00 2001
From: hyrious <hyrious@outlook.com>
Date: Fri, 20 May 2022 13:13:23 +0800
Subject: [PATCH] fix(component): visual bug in auto dark mode

---
 .../FlatThemeProvider/useDarkMode.ts          | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/flat-components/src/components/FlatThemeProvider/useDarkMode.ts b/packages/flat-components/src/components/FlatThemeProvider/useDarkMode.ts
index 198dfd348fb..5637fd0e4d6 100644
--- 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;