xiaoxue_admin
/
xLog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: make multiple pages switch to dark mode together (#353)

This commit is contained in:
Suemor 2023-04-17 03:41:03 +08:00 committed by GitHub
parent 3af844b495
commit ee08666375
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/hooks/useDarkMode.ts
View File

@ -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)

7
src/lib/storage.ts
View File

@ -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]
}