¿Qué es el Dark Mode (Modo Oscuro) en diseño web?
El dark mode, también conocido como modo oscuro, es una opción de diseño web que permite invertir los colores de una página o aplicación, en contraposición al tradicional modo claro. En lugar de utilizar fondos blancos y elementos oscuros, el dark mode utiliza fondos oscuros y texto claro para mejorar la legibilidad y reducir la fatiga visual, especialmente en entornos con poca luz. Además de brindar un aspecto moderno y elegante, el dark mode puede reducir el consumo de energía en dispositivos con pantallas OLED, al requerir menos iluminación. Esta opción ha ganado popularidad en los últimos años debido a sus beneficios estéticos y funcionales, y ha sido implementada en diversas plataformas y aplicaciones.
Dark Mode en Tailwind
Ahora que el dark modo es una característica muy importante en los sistemas operativos, se esta convirtiendo también en algo muy necesario y frecuente en los sitios web.
Para hacer esta implementación muy sencilla, Tailwind incluye la variante dark que permite aplicar diferentes estilos cuando el modo oscuro esta habilitado.
Por default, tailwind utiliza la característica prefers-color-scheme de CSS. Si deseas agregar soporte al modo oscuro manualmente, abre el archivo tailwind.config.js y habilita darkMode: 'class'.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
// ...
}