useThemeToggle

useThemeToggle() proporciona el estado que usa UIThemeToggle de @meekojs/ui. Permite construir un selector conservando el tema del SSR durante la hidratación.

Uso#

Activa theme: true en meeko.config.ts y llama al composable en el script de un componente:

import { useThemeToggle } from '@meekojs/meeko/framework'

const toggle = useThemeToggle()

Tipo#

function useThemeToggle(): ThemeToggleState

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>;
}

interface ThemeToggleSystem<Name extends string = ThemeName> {
	readonly light: Name
	readonly dark: Name
}

Parámetros#

No recibe parámetros. Lee los temas de la configuración del framework.

Valor devuelto#

Un ThemeToggleState<Name, Choice>, con nombres inferidos de la configuración:

Ejemplos#

import { computed } from '@meekojs/meeko'
import { useThemeToggle } from '@meekojs/meeko/framework'

const toggle = useThemeToggle()
const label = computed(() => (toggle.known.value ? `Tema: ${toggle.theme.theme.value}` : 'Cambiar tema'))

El selector de tema propio incluye un formulario completo con POST /_meeko/theme, theme y return, que cambia mediante theme.set(choice) cuando interactive.value es true.

Para iconos sin saltos, pinta todos los iconos con data-meeko-theme-icon y deja que la regla de <head> muestre el de la elección. Mientras known.value sea false, anuncia una acción neutra («Cambiar tema»).

Errores comunes#

Llamarlo sin configurar el tema#

// meeko.config.ts no activa theme
const toggle = useThemeToggle()

// meeko.config.ts
export default defineMeekoConfig({ theme: true })

Sin theme en meeko.config.ts, o fuera de una aplicación Meeko, lanza MEEK111. Activa theme: true y llámalo mientras se ejecuta el script de un componente.

Cambiar el tema durante el SSR#

const toggle = useThemeToggle()
toggle.theme.set('dark') // el setup también corre en el servidor

import { useThemeToggle } from '@meekojs/meeko/framework'

const toggle = useThemeToggle()
const chooseDark = (): void => {
	if (toggle.interactive.value) toggle.theme.set('dark')
}

theme.set() sólo cambia el tema en el navegador. En SSR usa el estado de sólo lectura y conserva el envío nativo del formulario; no llames a set en el setup.

Notas#

• known e interactive son señales de sólo lectura: consulta .value en el binding que las usa.
• El formulario funciona sin JavaScript con un adaptador con servidor. El adaptador static necesita JavaScript.
• La cookie, el script, la regla de iconos de <head> y POST /_meeko/theme permanecen en core; no requieren UI.
• <MeekoThemeToggle> está obsoleto desde 1.8 y se retira en 2.0. Para un selector listo, activa el módulo UI y usa <UIThemeToggle>.

Relacionado#

• useThemeDevuelve el tema claro/oscuro de la aplicación (la elección, el tema efectivo y la lista de temas) y lo cambia en html, la cookie y las demás pestañas.
• themeEl tema claro, oscuro o propio de la aplicación sin parpadeo, con la elección en una cookie, el tema en html desde el primer byte y useTheme en los componentes.
• Selector de tema propioMeeko como framework full-stack