/
githubmirror
/
traefik
Обзор
Документация
Войти
/
githubmirror
/
traefik
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
webui/src/hooks/use-theme.ts
49 строк
1 KB
Gina A.
Migrate Traefik Proxy dashboard UI to React
28 май 2025, 12:26
Не верифицирован
28 май 2025, 12:26
f16fff5
Код
Авторство
О чём код?
import { useMemo } from 'react' import { useLocalStorage } from 'usehooks-ts' const SYSTEM = 'system' const DARK = 'dark' const LIGHT = 'light' type ThemeOptions = 'system' | 'dark' | 'light' const THEME_OPTIONS: ThemeOptions[] = [SYSTEM, DARK, LIGHT] type UseThemeRes = { selectedTheme: ThemeOptions appliedTheme: ThemeOptions setTheme: () => void } export const useTheme = (): UseThemeRes => { const [selectedTheme, setSelectedTheme] = useLocalStorage<ThemeOptions>('selected-theme', SYSTEM) const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches const appliedTheme = useMemo(() => { if (selectedTheme === SYSTEM) { if (prefersDark) return DARK return LIGHT } return selectedTheme }, [selectedTheme, prefersDark]) return { selectedTheme, appliedTheme, setTheme: () => { setSelectedTheme((curr: ThemeOptions): ThemeOptions => { const currIdx = THEME_OPTIONS.indexOf(curr) const nextIdx = currIdx + 1 if (nextIdx === THEME_OPTIONS.length) return SYSTEM return THEME_OPTIONS[nextIdx] }) }, } } export const useIsDarkMode = () => { const { appliedTheme } = useTheme() return appliedTheme === DARK }