fix: flash in loading

This commit is contained in:
Ou 2024-10-14 17:19:28 +08:00
parent 4607758dd0
commit dc0deb4ead
2 changed files with 9 additions and 1 deletions

View File

@ -4,7 +4,9 @@ import { useLocalStorage, useMedia } from "react-use"
export declare type ColorScheme = "dark" | "light" | "auto"
export function useDark(key = "color-scheme", defaultColorScheme: ColorScheme = "auto") {
const [colorScheme, setColorScheme] = useLocalStorage(key, defaultColorScheme)
const [colorScheme, setColorScheme] = useLocalStorage(key, defaultColorScheme, {
raw: true,
})
const prefersDarkMode = useMedia("(prefers-color-scheme: dark)")
const isDark = useMemo(() => colorScheme === "auto" ? prefersDarkMode : colorScheme === "dark", [colorScheme, prefersDarkMode])

View File

@ -16,6 +16,12 @@ export const Route = createRootRouteWithContext<{
component: RootComponent,
notFoundComponent: NotFoundComponent,
beforeLoad: () => {
const theme = localStorage.getItem("color-scheme") || "auto"
const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches
if (!theme ? isDark : theme === "dark") {
document.documentElement.classList.add("dark")
}
const query = new URLSearchParams(window.location.search)
if (query.has("login")) {
[...query.entries()].forEach(key => localStorage.setItem(key[0], key[1]))