Implementación de Dark Mode: CSS, JavaScript y Preferencia del Sistema

¿Qué es Dark Mode y por qué importa?

Dark mode (tema oscuro) es un modo de interfaz que muestra fondos oscuros con texto claro. Reduce la fatiga visual en entornos con poca luz.

En pantallas OLED, dark mode puede prolongar la duración de la batería un 30-60% porque los píxeles oscuros se apagan. Ventaja significativa para dispositivos móviles.

Preferencia del usuario: Con soporte de dark mode a nivel de sistema (macOS, Windows, iOS, Android), los usuarios esperan una experiencia consistente en todas las aplicaciones.

Accesibilidad: Algunos usuarios (fotofobia, migraña) prefieren temas oscuros. Dark mode proporciona beneficios de accesibilidad para estos usuarios.

Gestión de Temas con Variables CSS

Las custom properties de CSS (variables) permiten gestionar colores de tema de forma centralizada. Defina el tema por defecto (light) en :root, tema dark en [data-theme="dark"].

Ejemplo: :root { --bg: #ffffff; --text: #1a1a1a; } [data-theme="dark"] { --bg: #1a1a1a; --text: #e0e0e0; }. Todos los estilos usan estas variables.

Transiciones de color: body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; } proporciona transición suave de tema.

Control de contraste: Siga las ratios de contraste WCAG también en dark mode. Texto claro sobre fondo oscuro requiere ratio de contraste 4.5:1.

Sombras y bordes: Las sombras (box-shadow) son menos visibles en dark mode. Use bordes para hacer los límites de los elementos más distintos.

Cambio de Tema con JavaScript

Botón de toggle: Cuando el usuario hace clic en el botón, cambie el tema con document.documentElement.setAttribute('data-theme', 'dark').

Guardar preferencia: Guarde la elección del usuario con localStorage.setItem('theme', 'dark'). Lea con localStorage.getItem('theme') cuando la página cargue.

Prevención de FOUC: Para prevenir Flash of Unstyled Content (FOUC), aplique la configuración de tema con script inline en <head>. Esto determina el tema antes de renderizar.

Función toggle: function toggleTheme() { const current = document.documentElement.getAttribute('data-theme'); const next = current === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', next); localStorage.setItem('theme', next); }

Detección de Preferencia del Sistema

Media query prefers-color-scheme: Aplique estilos basados en preferencia del sistema en CSS con @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } }.

Detección con JavaScript: Verifique preferencia de dark mode del sistema con window.matchMedia('(prefers-color-scheme: dark)').matches.

Escuchar cambios: Rastree cambios de tema del sistema con matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { if (e.matches) setDark(); else setLight(); }).

Orden de prioridad: 1. Selección manual del usuario (localStorage), 2. Preferencia del sistema (prefers-color-scheme), 3. Tema por defecto (light). Verifique en este orden.

Mejores Prácticas de Dark Mode

No use negro puro (#000000). Gris muy oscuro (#121212 o #1a1a1a) se ve mejor y reduce la fatiga visual.

Reduzca la saturación de color. Los colores brillantes (rojo, verde, azul) en dark mode causan fatiga visual. Use colores desaturados.

Ajuste las imágenes. Las imágenes brillantes pueden ser molestas en dark mode. Oscurezca ligeramente las imágenes con filter: brightness(0.8).

Pruebe todos los componentes. Formularios, tablas, bloques de código, gráficos deben verse correctos en dark mode. Verifique cada componente en dark mode.

Meta theme-color: Configure el color de la UI del navegador (barra de direcciones) para coincidir con dark mode con <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">.

Dark Mode en Frameworks

Tailwind CSS: Defina estilos de dark mode con prefijo dark:. Como dark:bg-gray-900 dark:text-white. Proporciona control manual con estrategia de clase.

React: Implementación fácil de dark mode con hook useDarkMode o librería next-themes. Gestión de tema compatible con SSR.

Vue: Dark mode reactivo con composable useDark de @vueuse/core. Detección automática de preferencia del sistema.

Bootstrap: Soporte de dark mode en Bootstrap 5.3+ con atributo data-bs-theme="dark". Gestión de tema con variables CSS.