/
githubmirror
/
gogs
Обзор
Документация
Войти
/
githubmirror
/
gogs
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
web/src/components/ThemeProvider.tsx
47 строк
2 KB
ᴊᴏᴇ ᴄʜᴇɴ
web: migrate commit page with @pierre/diffs and @pierre/trees (#8295)
29 май 2026, 07:30
Не верифицирован
29 май 2026, 07:30
4b5eda4
Код
Авторство
О чём код?
import { type ReactNode, useEffect, useMemo, useState } from "react"; import { ThemeContext, type ThemeContextValue } from "@/lib/theme-context"; const STORAGE_KEY = "gogs-theme"; function systemPrefersDark(): boolean { return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches; } function readStoredTheme(): ThemeContextValue["theme"] { if (typeof localStorage === "undefined") return "system"; const v = localStorage.getItem(STORAGE_KEY); return v === "light" || v === "dark" || v === "system" ? v : "system"; } function applyTheme(theme: ThemeContextValue["theme"]) { const dark = theme === "dark" || (theme === "system" && systemPrefersDark()); document.documentElement.classList.toggle("dark", dark); } export function ThemeProvider({ children }: { children: ReactNode }) { const [theme, setThemeState] = useState<ThemeContextValue["theme"]>(readStoredTheme); useEffect(() => { applyTheme(theme); if (theme !== "system") return; const mq = window.matchMedia("(prefers-color-scheme: dark)"); const onChange = () => applyTheme("system"); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, [theme]); const value = useMemo<ThemeContextValue>( () => ({ theme, setTheme: (next) => { localStorage.setItem(STORAGE_KEY, next); setThemeState(next); applyTheme(next); }, }), [theme], ); return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>; }