El modo oscuro llegó a los sistemas operativos y navegadores hace algunos años, y desde entonces muchas webs lo adoptaron casi por moda. La pregunta que pocos se hacen antes de implementarlo es la más importante: ¿conviene a mi web o lo estoy poniendo porque «está de moda»?

La respuesta no es universal. Hay proyectos donde el modo oscuro aporta valor real y otros donde solo suma complejidad de mantenimiento sin ningún beneficio para el usuario. Vamos a ver cuándo aplicarlo con criterio.

Por qué el modo oscuro no es solo estética

El argumento más fuerte a favor del modo oscuro es técnico y fisiológico. En pantallas OLED (presentes en la mayoría de smartphones de gama media-alta en Perú, como los Samsung Galaxy o iPhones), los píxeles negros literalmente se apagan. Eso reduce el consumo de batería de forma medible, especialmente en webs con fondos grandes.

Además, en entornos con poca luz (la cama a las 11 pm, un coworking con luz tenue), el contraste de un fondo blanco intenso puede resultar molesto. Para aplicaciones que se usan de noche, el modo oscuro reduce la fatiga visual. Esto es relevante si tu web es un dashboard, una app de lectura o un panel de administración.

Cuándo NO lo necesitas

Si tienes una tienda online de flores en Miraflores o un restaurante en Barranco, el modo oscuro probablemente no aporta. Tu usuario entra, mira el menú o el catálogo, y sale. El tiempo de sesión es corto, la luz del ambiente suele ser normal, y mantener dos versiones visuales de tu web (colores, imágenes, íconos) multiplica el trabajo de diseño.

Otro caso donde conviene evitarlo: marcas con identidad visual muy definida en colores claros. Una web corporativa con paleta blanca y azul marino pierde coherencia si el modo oscuro la convierte en algo gris y apagado. La identidad de marca vale más que seguir la tendencia.

Los tres enfoques para implementarlo

1. Respetar la preferencia del sistema

La forma más simple y recomendada para la mayoría de webs es usar la media query prefers-color-scheme: dark. El navegador detecta si el sistema operativo del usuario tiene modo oscuro activado y aplica tu hoja de estilos alternativa automáticamente. El usuario no tiene que hacer nada.

Esto funciona bien cuando quieres adaptarte sin complicar la interfaz. El problema es que no le das control al usuario sobre la preferencia dentro de tu web.

2. Toggle manual

Agregar un botón de cambio de tema le da control al usuario. Es la opción más popular en webs de contenido (blogs, portales de noticias, herramientas). Requiere guardar la preferencia en localStorage para que no se pierda al recargar la página.

El punto débil: muchos implementan el toggle sin respetar también la preferencia del sistema. El usuario abre la web, está en modo oscuro en su teléfono, pero la web le muestra modo claro. Tiene que cambiarlo a mano. Mala experiencia.

3. Ambos combinados

Lo correcto: detectar la preferencia del sistema como valor por defecto y permitir que el usuario la sobreescriba con un toggle. Si el usuario no ha tocado nada, tu web respeta lo que tiene configurado en su dispositivo. Si cambia la preferencia en tu web, se guarda y tiene prioridad.

Errores de diseño que arruinan el modo oscuro

El error más frecuente es simplemente invertir los colores. Un fondo blanco #FFFFFF se convierte en negro #000000, y el texto negro en blanco. El resultado es demasiado contrastado y fatiga la vista casi igual que el modo claro. Los diseñadores con experiencia usan tonos de gris oscuro (alrededor de #1A1A1A o #121212) como fondo, no negro puro.

Otro problema: las imágenes. Si tienes fotos de producto sobre fondo blanco, en modo oscuro quedan con un halo extraño. Hay que prever esto desde el diseño, usando fondos transparentes (PNG) o imágenes específicas para cada modo.

Las sombras también se comportan distinto. En modo claro, una sombra oscura da profundidad. En modo oscuro, una sombra oscura sobre fondo oscuro no se ve. Hay que usar sombras con color o cambiar la lógica de elevación.

Impacto en rendimiento y SEO

Implementado con CSS puro (variables de color y media queries), el modo oscuro no añade peso significativo a la página. Donde sí puede haber un impacto es si cargas dos hojas de estilos separadas de forma condicional con JavaScript, lo que puede retrasar el primer renderizado.

En cuanto al SEO, Google no indexa el modo oscuro como contenido separado. Lo que sí puede verse afectado es el CLS (Cumulative Layout Shift) si el toggle de tema causa cambios de layout al cargar. Hay que asegurarse de que el estado inicial del tema se aplique antes del primer renderizado visible.

• Usa variables CSS (:root y [data-theme="dark"]) para centralizar todos los colores.
• Prueba el contraste en ambos modos con herramientas como WebAIM Contrast Checker.
• No olvides estados de foco, bordes y placeholders: también cambian con el tema.
• Revisa los colores de tus íconos SVG: muchos usan colores hardcodeados que no se adaptan.

¿Vale la pena para una pyme en Lima?

Depende del tipo de web. Para una tienda WooCommerce orientada a ventas rápidas, el tiempo de implementación y mantenimiento probablemente no se justifica. Para una plataforma SaaS, un portal de noticias o una herramienta de trabajo que la gente usa varias horas al día, sí tiene sentido.

Si decides implementarlo, hazlo bien desde el principio. Agregar modo oscuro a una web que no fue diseñada para tenerlo suele costar más que haberlo planeado desde el inicio. Es una decisión de diseño, no un ajuste de último momento.

El proceso de diseño: cómo planear el modo oscuro desde el inicio

El error que más tiempo cuesta corregir es agregar el modo oscuro a una web que no fue diseñada para tenerlo. Los colores que funcionan en claro no son simplemente los inversos de los que funcionan en oscuro. Los estados, las sombras, las elevaciones y hasta los íconos tienen que repensarse.

Si estás iniciando un proyecto nuevo y ya sabes que quieres modo oscuro, lo más eficiente es trabajar con variables CSS desde el principio. Define todos tus colores como variables en :root y crea una clase o selector de datos para el tema oscuro que sobreescriba esas variables. Todo el CSS de tu interfaz usa las variables, nunca valores hardcodeados.

Este enfoque hace que agregar el toggle sea trivial: cambias un atributo en el elemento html y el CSS se encarga del resto. También facilita el mantenimiento: si decides cambiar el color de acento de tu marca, cambias una variable y se actualiza en ambos temas automáticamente.

Para webs ya existentes en WordPress, la ruta más práctica es auditar primero cuántos colores hardcodeados tienes en el CSS. Si son pocos y el tema es relativamente simple, migrar a variables puede hacerse en una tarde. Si tienes centenares de declaraciones de color dispersas en varios archivos, puede ser más eficiente rediseñar el tema completo con el sistema de variables desde cero.

Preguntas frecuentes

¿El modo oscuro mejora el posicionamiento en Google?

No de forma directa. Google no considera el modo oscuro como factor de ranking. Donde sí puede influir es en métricas de experiencia como el CLS si está mal implementado, o en el tiempo de permanencia si los usuarios prefieren navegar con ese modo y tu web se lo facilita.

¿Puedo agregar modo oscuro en WordPress sin programar?

Algunos temas de WordPress ya incluyen soporte nativo para modo oscuro. Plugins como WP Dark Mode permiten activarlo sin código. Sin embargo, para un resultado profesional que respete la identidad de marca y no genere problemas visuales, lo ideal es implementarlo a nivel de CSS con ayuda de un desarrollador.

¿El modo oscuro consume menos batería en todos los dispositivos?

Solo en pantallas OLED, donde los píxeles negros se apagan completamente. En pantallas LCD convencionales el ahorro de batería es mínimo o inexistente, porque el backlight sigue encendido. La mayoría de smartphones de gama media y alta actuales usan OLED, pero los monitores de escritorio suelen ser LCD.

¿Qué colores de fondo usar en modo oscuro?

Evita el negro puro (#000000). Los fondos en rangos de #111111 a #1E1E1E resultan más cómodos para la lectura prolongada. Para el texto, un blanco suavizado como #E0E0E0 o #F0F0F0 reduce el contraste excesivo sin sacrificar legibilidad.

¿Cómo sé si mis usuarios usan modo oscuro?

Puedes detectarlo en JavaScript con window.matchMedia(‘(prefers-color-scheme: dark)’).matches. Si tienes Google Analytics 4, también puedes crear segmentos por tipo de dispositivo y correlacionarlo con comportamiento. Estudios recientes indican que entre el 30% y 50% de usuarios móviles lo tienen activado.