Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 1x 1x 1x 9x 9x 9x 9x 1x 1x 9x 1x 11x 11x 11x 11x 11x 1x 7x 7x 7x 7x 7x 7x 7x 1x 1x | export type ThemePref = 'system' | 'light' | 'dark'
export const THEME_KEY = 'mw:theme'
export const THEME_PREFS: ThemePref[] = ['system', 'light', 'dark']
/** Stored values are JSON (as written by useStoredState); anything else is "system". */
export function parseThemePref(raw: string | null): ThemePref {
try {
const v = raw == null ? null : JSON.parse(raw)
return THEME_PREFS.includes(v) ? v : 'system'
} catch {
return 'system'
}
}
export function resolveTheme(
pref: ThemePref,
systemDark: boolean,
): 'light' | 'dark' {
return pref === 'system' ? (systemDark ? 'dark' : 'light') : pref
}
/** Sets html[data-theme] and the browser bar colour to match. */
export function applyTheme(pref: ThemePref) {
const dark = window.matchMedia('(prefers-color-scheme: dark)').matches
const theme = resolveTheme(pref, dark)
document.documentElement.dataset.theme = theme
document
.querySelector('meta[name="theme-color"]')
?.setAttribute('content', THEME_COLORS[theme])
}
export const THEME_COLORS = {dark: '#111315', light: '#f7f5f0'} as const
/**
* Runs in <head> before the first paint so a light-mode member never sees a
* dark flash. Kept self-contained: it cannot import anything.
*/
export const themeScript = `(function(){try{var p=JSON.parse(localStorage.getItem(${JSON.stringify(THEME_KEY)})||'"system"')}catch(e){p='system'}if(p!=='light'&&p!=='dark')p=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';document.documentElement.dataset.theme=p})()`
|