ThemeToggleState
interfaz Since 1.8.0
Lo que devuelve useThemeToggle: lo que necesita un selector de tema propio para pintar
lo mismo en SSR y en la hidratación y para cambiar el tema sin JavaScript con el formulario de
POST /_meeko/theme.
import type { ThemeToggleState } from "@meekojs/meeko/framework";Source code src/shared/theme.ts:418
Declaración #
interface ThemeToggleState<Name extends string = ThemeName, Choice extends string = ThemeChoice> {
readonly theme: ThemeState<Name, Choice>
readonly choices: readonly Choice[]
readonly system: ThemeToggleSystem<Name> | undefined
readonly known: ReadonlySignal<boolean>
readonly interactive: ReadonlySignal<boolean>
}Type parameters #
-
Nameextends string = ThemeName -
Choiceextends string = ThemeChoice
Example #
import { useThemeToggle } from "@meekojs/meeko/framework";
const toggle = useThemeToggle();
const next = computed(() => {
const index = toggle.choices.indexOf(toggle.theme.theme.value);
return toggle.choices[(index + 1) % toggle.choices.length];
});Propiedades #
theme
#
readonly theme: ThemeState<Name, Choice>El estado del tema, el mismo que devuelve useTheme().
choices
#
readonly choices: readonly Choice[]Las elecciones de la configuración en orden: los temas y, con el modo sistema, "system".
system
#
readonly system: ThemeToggleSystem<Name> | undefinedLos temas que muestra "system" según prefers-color-scheme; undefined sin modo sistema.
known
#
readonly known: ReadonlySignal<boolean>Si este render conoce la elección del usuario: el servidor con la cookie, el navegador al
terminar la hidratación. Mientras vale false, nombre la acción sin el tema actual.
interactive
#
readonly interactive: ReadonlySignal<boolean>Si el selector ya responde en el navegador: false en SSR y durante la hidratación.
See also #
- Custom theme selector Framework full-stack