Navegación

ThemeSwitcher

Los tres estados del tema —sistema, claro, oscuro— en una barra segmentada.

import { ThemeMenuRadio, ThemeSwitcher } from "sebs7n-ui/theme-switcher"

Ejemplos

Los tres estados del tema

import { ThemeSwitcher } from "sebs7n-ui/theme-switcher"

function Basico() {
  return <ThemeSwitcher />
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

ThemeMenuRadio

Hereda las props de Menu.RadioGroup.

Prop	Tipo	Por defecto	Descripción
`labels`	`Partial<ThemeSwitcherLabels>`	—
`className`	`string`	—

ThemeSwitcher

Hereda las props de <div>.

Prop	Tipo	Por defecto
`labels`	`Partial<ThemeSwitcherLabels>`	—
`onKeyDown`	`KeyboardEventHandler<T>`	—
`className`	`string`	—

Teclado

← →: Se mueve entre las tres opciones.
Enter · Espacio: Aplica.
Tab: Entra y sale del grupo.

Accesibilidad

Cada opción tiene nombre accesible propio; los textos se cambian con labels.
Sin enableSystem en el ThemeProvider no aparece la opción «Sistema».
Para el mismo control dentro de un menú propio, ThemeMenuRadio (ítems menuitemradio).

Reglas de uso

ThemeSwitcher para fuera de un menú: header público, página de ajustes.
ThemeMenuRadio dentro de un DropdownMenu. UserMenu ya lo trae.
Necesita next-themes con attribute="class" y suppressHydrationWarning en <html>.

Relacionados

UserMenu DropdownMenu ToggleGroup