From ee08666375f73ed4f9228eb3fb42b31c920ab48d Mon Sep 17 00:00:00 2001
From: Suemor <suemor233@outlook.com>
Date: Mon, 17 Apr 2023 03:41:03 +0800
Subject: [PATCH] feat: make multiple pages switch to dark mode together (#353)

---
 src/hooks/useDarkMode.ts | 23 +++++++++++++++--------
 src/lib/storage.ts       |  7 ++++++-
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/hooks/useDarkMode.ts b/src/hooks/useDarkMode.ts
index e74ca051..6e26152d 100644
--- a/src/hooks/useDarkMode.ts
+++ b/src/hooks/useDarkMode.ts
@@ -18,9 +18,9 @@ const useMediaStore = create<IMediaStore>(() => {
 const isServerSide = () => typeof window === "undefined"
 
 interface DarkModeConfig {
-  classNameDark?: string // A className to set "dark mode". Default = "dark-mode".
-  classNameLight?: string // A className to set "light mode". Default = "light-mode".
-  element?: HTMLElement | undefined | null // The element to apply the className. Default = `document.body`
+  classNameDark?: string // A className to set "dark mode". Default = "dark".
+  classNameLight?: string // A className to set "light mode". Default = "light".
+  element?: HTMLElement | undefined | null // The element to apply the className. Default = `document.body`.
   storageKey?: string // Specify the `localStorage` key. Default = "darkMode". set to `undefined` to disable persistent storage.
 }
 const darkModeKey = "darkMode"
@@ -67,21 +67,28 @@ const useDarkModeInternal = (
       }
     }
 
-    const focusHandler = () => {
-      const storageValue = getStorage(storageKey)
-      // if back to page and not storage color mode, switch to follow system
+    const storageHandler = () => {
+      const storageValue = getStorage(storageKey, true)
+      // if not storage color mode, switch to follow system
       if (storageValue === undefined) {
         setDarkMode(window.matchMedia("(prefers-color-scheme: dark)").matches)
+      } else {
+        // make multiple pages to switch to dark mode together.
+        if (storageValue === "true") {
+          setDarkMode(true)
+        } else if (storageValue === "false") {
+          setDarkMode(false)
+        }
       }
     }
 
-    window.addEventListener("focus", focusHandler)
+    window.addEventListener("storage", storageHandler)
     window
       .matchMedia("(prefers-color-scheme: dark)")
       .addEventListener("change", handler)
 
     return () => {
-      window.removeEventListener("focus", focusHandler)
+      window.removeEventListener("storage", storageHandler)
       window
         .matchMedia("(prefers-color-scheme: dark)")
         .removeEventListener("change", handler)
diff --git a/src/lib/storage.ts b/src/lib/storage.ts
index 2618f4b0..9f9c639d 100644
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -11,7 +11,12 @@ export const getKeys = (key: string) => {
   return Object.keys(data).filter((k) => k.startsWith(key))
 }
 
-export const getStorage = (key: string) => {
+export const getStorage = (key: string, noCache?: boolean) => {
+  if (noCache) {
+    try {
+      data = JSON.parse(localStorage.getItem(namespace) || "{}")
+    } catch (error) {}
+  }
   return data[key]
 }