ThemeToggle

UIThemeToggle usa la opción theme de meeko.config.ts. Es un formulario que envía POST /_meeko/theme: sin JavaScript, el servidor guarda la preferencia y vuelve a la misma página. Con JavaScript, el tema cambia al instante, sin navegar. Los dos ejemplos y la cabecera comparten la misma preferencia.

Un botón que alterna

En mode="cycle", el valor por defecto, cada pulsación pasa a la siguiente elección. Su nombre accesible indica el tema actual y el siguiente.

// meeko.config.ts
export default defineMeekoConfig({
  modules: ['@meekojs/ui'],
  theme: { default: 'dark' },
})

<!-- app/app.meeko -->
<UIThemeToggle />

Un grupo de opciones

En mode="select", cada elección es un radio. Las flechas, Inicio y Fin mueven el foco y la elección, como en un grupo de radios nativo.

<UIThemeToggle mode="select" />

Elecciones, textos e iconos

themes limita y ordena las elecciones; labels y messages sustituyen sus nombres y los textos accesibles en un selector concreto: por defecto siguen el idioma del documento y ui.messages (véase Temas). Un snippet con el nombre de cada elección sustituye su texto, por ejemplo por un icono; en ese caso el nombre se conserva como etiqueta accesible.

<UIThemeToggle
  bind:themes="['light', 'dark']"
  bind:labels="{ light: 'Light', dark: 'Dark' }"
  bind:messages="{
    group: 'Theme',
    unknown: 'Change theme',
    cycle: (current, next) => 'Theme: ' + current + '. Switch to ' + next,
  }">
  <snippet name="light"><svg aria-hidden="true">…</svg></snippet>
  <snippet name="dark"><svg aria-hidden="true">…</svg></snippet>
</UIThemeToggle>

API

Para leer o cambiar el tema desde tu código, usa useTheme(); para construir tu propio selector, usa useThemeToggle() de @meekojs/meeko/framework. El tipo UIThemeToggleProps se exporta desde @meekojs/ui/runtime.