44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
|
import { useCallback, useEffect, useState } from 'react'
|
||
|
|
import {
|
||
|
|
GUANGHU_THEMES,
|
||
|
|
GUANGHU_THEME_STORAGE_KEY,
|
||
|
|
readGuanghuTheme,
|
||
|
|
writeGuanghuTheme,
|
||
|
|
type GuanghuTheme,
|
||
|
|
} from '../lib/guanghuTheme'
|
||
|
|
import { applyThemeModeToDocument, writeStoredThemeMode } from '../lib/themeMode'
|
||
|
|
|
||
|
|
function applyGuanghuTheme(theme: GuanghuTheme): void {
|
||
|
|
document.documentElement.setAttribute('data-guanghu-theme', theme)
|
||
|
|
if (theme === 'native') return
|
||
|
|
|
||
|
|
const mode = ['lake-light', 'dawn-gold', 'tundra-green', 'peach-mist'].includes(theme) ? 'light' : 'dark'
|
||
|
|
applyThemeModeToDocument(document, mode)
|
||
|
|
writeStoredThemeMode(window.localStorage, mode)
|
||
|
|
}
|
||
|
|
|
||
|
|
export function useGuanghuTheme(): {
|
||
|
|
theme: GuanghuTheme
|
||
|
|
setTheme: (theme: GuanghuTheme) => void
|
||
|
|
cycleTheme: () => void
|
||
|
|
} {
|
||
|
|
const [theme, setTheme] = useState<GuanghuTheme>(() => (
|
||
|
|
typeof window === 'undefined' ? 'native' : readGuanghuTheme(window.localStorage)
|
||
|
|
))
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
applyGuanghuTheme(theme)
|
||
|
|
writeGuanghuTheme(window.localStorage, theme)
|
||
|
|
}, [theme])
|
||
|
|
|
||
|
|
const cycleTheme = useCallback(() => {
|
||
|
|
setTheme(current => {
|
||
|
|
const index = GUANGHU_THEMES.indexOf(current)
|
||
|
|
return GUANGHU_THEMES[(index + 1) % GUANGHU_THEMES.length]
|
||
|
|
})
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return { theme, setTheme, cycleTheme }
|
||
|
|
}
|
||
|
|
|
||
|
|
export { GUANGHU_THEME_STORAGE_KEY }
|