Component ThemeToggle
El ThemeToggle permet alternar entre temes clar i fosc amb suport per al control extern.
Canvia automàticament el tema global de l'aplicació.
Un segon toggle per veure la sincronització automàtica.
Variants i configuració
El component pot adaptar-se a diferents contextos i mides.
Configuració per defecte del component.
Amb text descriptiu visible.
Funcionalitats i animacions
El component inclou transicions suaus i feedback visual.
Prova les següents funcionalitats:
- Fes clic per canviar de tema instantàniament
- Observa les transicions suaus dels colors
- Utilitza Tab per navegar amb el teclat
- Premeu Enter o Espai per activar el canvi
- L'estat actual es manté durant la sessió
Prova el toggle aquí:Aquest canvi afecta tota la demo!
Accessibilitat
El component està optimitzat per a l'accessibilitat i tecnologies assistives.
Característiques d'accessibilitat:
- Role "switch" per a tecnologies assistives
- Estats aria-checked per a lectors de pantalla
- Etiquetes ARIA descriptives
- Focus visible i gestionat correctament
- Navegació per teclat completament funcional
- Anuncis d'estat quan canvia el tema
- Contrast adequat en ambdós temes
Integració amb altres components
El ThemeToggle s'integra perfectament amb tots els components del Design System.
Exemple d'integració en diferents contextos:
Header de l'aplicació
Panell de configuració
Tema fosc
Ús i implementació
Com implementar i personalitzar el ThemeToggle a la teva aplicació.
Pasos per a la implementació:
- Importa el component ThemeToggle del Design System
- Inclou-lo dins del ThemeProvider de l'aplicació
- Configura les variants segons el context d'ús
- Personalitza les etiquetes si cal (opcional)
- Gestiona l'estat extern si necessites control programàtic
💡 Consell: El component persisteix automàticament la preferència de l'usuari al localStorage.