CSS Dark Mode

El modo oscuro es cada vez más popular en el diseño web porque reduce la fatiga visual y da un aspecto moderno a los sitios. Con CSS podemos configurar temas claros y oscuros de forma automática o manual.

Dark mode automático con media query

La media query <prefers-color-scheme> permite cambiar automáticamente entre modo claro y oscuro según la configuración del sistema del usuario.

Este ejemplo muestra cómo aplicar el dark mode automáticamente según los ajustes del sistema operativo del usuario.

Dark mode manual con clases

Además del cambio automático, también es posible hacerlo manualmente, agregando o quitando clases en el elemento body con ayuda de JavaScript.

En este ejemplo se puede cambiar manualmente entre modo claro y oscuro con clases de CSS.

Consejos para usar dark mode

Al implementar el modo oscuro, asegúrate de que el contenido siga siendo legible y cumpla con los principios de accesibilidad.

• Verifica siempre el contraste entre texto y fondo.
• Da a los usuarios la opción de cambiar manualmente.
• Prueba el dark mode en diferentes dispositivos y navegadores.