Implementa dark mode robusto con tokens CSS, preferencia del sistema y override manual sin romper accesibilidad.
Dark mode moderno no es invertir colores: es diseñar tokens para ambos contextos de iluminación.
Con variables CSS puedes cambiar paleta completa sin duplicar reglas por componente.
La mejor estrategia combina preferencia del sistema y override manual del usuario.
Cambia variables, no componentes enteros.
Define un set mínimo de tokens: fondo, superficie, texto y acento. Sobre ellos construyes todo el sistema visual.
Después puedes activar tema oscuro con media query o atributo en <code>html</code>.
Soporte automático para usuarios que ya usan modo oscuro.
<code>@media (prefers-color-scheme: dark)</code> permite adaptar estilos cuando el sistema operativo está en oscuro.
Si ofreces toggle manual, prioriza el valor elegido por usuario sobre la preferencia automática.
Implementa dark mode robusto con tokens CSS, preferencia del sistema y override manual sin romper accesibilidad.
Código del tema: display: grid; gap: 1rem;
Cambia variables, no componentes enteros.
Define un set mínimo de tokens: fondo, superficie, texto y acento. Sobre ellos construyes todo el sistema visual.
Después puedes activar tema oscuro con media query o atributo en html.
Soporte automático para usuarios que ya usan modo oscuro.
@media (prefers-color-scheme: dark) permite adaptar estilos cuando el sistema operativo está en oscuro.
Si ofreces toggle manual, prioriza el valor elegido por usuario sobre la preferencia automática.