Holds one half of the theme, the style or the color scheme, for
ThemeProvider, which uses it once for each. Both halves work alike: the
account's choice wins, then this browser's, then a fallback; the result is
applied to the root element and mirrored to localStorage, where index.html's
first-paint script reads it.
Returns the half of the theme spec describes. An unknown stored value,
such as "default", which "smooth" was once stored as, reads as no choice.
Passed to useThemeChoice by ThemeProvider, as a constant: one for
the style, one for the scheme.
- allowed: readonly T[]
-
attribute: string
The root element's attribute the stylesheets key on.
-
base: T
The value the stylesheets draw without the attribute, which is then left out.
-
fallback: T
What applies when nobody chose.
-
setting: "style" | "colorScheme"
The account setting that holds the choice.
-
storageKey: string
The localStorage key, which index.html's script reads too.
Returned by useThemeChoice to ThemeProvider.
-
local: T | null
This browser's own choice, which an account without one takes.
-
set: (next: T) => void
Applies
next, stores it here, and saves it to the account when signed in. - value: T
Usage
import * as mod from "src/hooks/theme/useThemeChoice.ts";