ThemeToggle

experimentalLa API puede cambiar sin una versión mayor. Desde la versión 0.1.0.

Botón que alterna el tema entre sistema, oscuro y claro, recuerda la elección y la anuncia a los lectores de pantalla.

import { ThemeToggle } from '@pipepath/brand-ui';

Ejemplos

Como lo renderiza el servidor (el del encabezado es el interactivo)

tema oscuro

arcade claro

Props de ThemeToggle, leídas de sus tipos de TypeScript
Prop	Tipo	Por defecto	Descripción (en inglés, desde el código)
`className`	`string`	—
`labels` (obligatoria)	`ThemeLabels`	—	Visible text from the consumer, for example `{ prefix: 'Tema', system: 'sistema', dark: 'oscuro', light: 'claro' }`.
`ref`	`Ref<HTMLAnchorElement \| HTMLButtonElement>`	—

Una vez por sitio, en el encabezado, como isla de cliente (client:load).
Pon themeBootScript() en el <head> y themeLabelScript(labels) justo después del selector: la página nunca muestra el tema ni la etiqueta equivocados.
Al cambiar el tema, anuncia el cambio a los lectores de pantalla en el idioma de la página.