ThemeState
interfaz Desde 1.4.0
Lo que devuelve useTheme: la elección, el tema efectivo y la lista de temas.
ts
import type { ThemeState } from "@meekojs/meeko/framework";Código fuente src/shared/theme.ts:150
Declaración #
ts
interface ThemeState<Name extends string = ThemeName, Choice extends string = ThemeChoice> {
readonly theme: Signal<Choice>
readonly resolved: ReadonlySignal<Name>
readonly themes: readonly Name[]
set(theme: Choice): void
}Parámetros de tipo #
-
Nameextends string = ThemeName Nombres de los temas.
-
Choiceextends string = ThemeChoice Elecciones posibles: los temas y, si está activo,
"system".
Ejemplo #
ts
import type { ThemeState } from "@meekojs/meeko/framework";
function next(state: ThemeState): void {
state.set(state.resolved.value === "dark" ? "light" : "dark");
}Miembros #
theme
#
readonly theme: Signal<Choice>Elección actual, "system" incluido. Es editable (sirve para model="theme"): asignarla
equivale a ThemeState.set. En el servidor es de sólo lectura.
resolved
#
readonly resolved: ReadonlySignal<Name>Tema efectivo: la elección o, en "system", el tema de prefers-color-scheme. En SSR, si el
servidor no conoce la preferencia (sin client hint), vale el tema claro de system.
set
#
set(theme: Choice): voidCambia la elección: actualiza <html>, color-scheme, la cookie y localStorage.