Modo oscuro

¿Qué es el modo oscuro?

El modo oscuro es una opción de pantalla que muestra texto y elementos de interfaz claros sobre un fondo oscuro. Se puede activar en el sistema operativo, en el navegador o dentro de una aplicación o sitio web. En la web, un sitio puede seguir el ajuste del sistema del visitante mediante la característica de medios prefers-color-scheme y permitirle cambiarlo con un interruptor.

Cómo funciona en la web

• prefers-color-scheme: una característica de medios de CSS con los valores light y dark. MDN la describe como la detección de si el usuario ha pedido un tema claro u oscuro, según un ajuste del sistema operativo o del navegador. Está ampliamente disponible en los navegadores desde enero de 2020.
• color-scheme: una propiedad de CSS, normalmente fijada en :root como light dark, que indica al navegador qué esquemas admite la página para que adapte el fondo, las barras de desplazamiento y los controles de formulario por defecto. No da estilo al resto de sus elementos, así que necesita sus propios colores. Ampliamente disponible desde enero de 2022.
• La etiqueta meta: <meta name="color-scheme" content="light dark"> en el head, antes de cualquier CSS, permite al navegador elegir de inmediato el fondo correcto en lugar de mostrar uno equivocado mientras carga el CSS.
• light-dark(): una función de CSS que elige uno de dos colores según el esquema activo, como alternativa más corta a una media query.

<meta name="color-scheme" content="light dark">

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #e8e8e8;
  }
}

body { background: var(--bg); color: var(--text); }

Defina los colores como variables con nombre por función (como --bg o --accent) y no por tono, para que al cambiar de tema no quede un "amarillo" que ya no parezca amarillo.

Ventajas y límites

A mucha gente le resulta simplemente más cómodo para la vista, y algunos usuarios, incluidas personas con baja visión, necesitan o prefieren texto claro sobre fondo oscuro. En pantallas AMOLED, donde los píxeles oscuros consumen menos, web.dev cita estudios de caso en Android de aplicaciones de Google como YouTube con ahorros de energía de hasta el 60 %. Esa cifra se refiere a esas pantallas y aplicaciones, no a cualquier sitio ni pantalla. Que el modo oscuro mejore el sueño son hipótesis, no resultados confirmados.

Ejemplo

Un panel de un SaaS con gráficos. En modo oscuro, los fondos blancos de las tarjetas pasan a casi negro, el texto a blanco roto y los colores rojo y verde de los gráficos se reajustan para que destaquen sobre la superficie oscura. Un logotipo con texto negro recibe una versión clara. Sin ese último paso, el logotipo desaparece en el fondo.

Errores comunes

• Limitarse a invertir los colores. Las fotos y los colores de marca quedan mal. web.dev propone suavizar las fotos con un filtro como grayscale(50%) y usar currentColor en los iconos SVG en línea.
• Blanco puro sobre negro puro. Resulta duro. El propio ejemplo de web.dev usa texto rgb(250, 250, 250) sobre rgb(5, 5, 5).
• Olvidar el contraste. WCAG 2.2 pide al menos 4,5:1 para texto normal y 3:1 para texto grande, en ambos temas. El azul de enlace por defecto del navegador no cumple sobre negro, como señala web.dev. Véase paletas de colores accesibles y WCAG.
• No permitir cambiarlo. Siga el ajuste del sistema por defecto, pero deje elegir.
• Un destello del tema equivocado. Si la elección se aplica solo tras cargar JavaScript, aparece un destello en cada visita. Use la etiqueta meta y aplique pronto la elección guardada.
• Olvidar widgets de terceros y capturas. Los contenidos incrustados y las imágenes pensadas para fondo claro suelen verse mal sobre oscuro.

Modo oscuro, UX y monitorización

El modo oscuro es una cuestión de diseño y de experiencia de usuario, pero puede sufrir regresiones como cualquier función. Compruebe el contraste y el diseño en ambos temas tras cada versión y vigile también el rendimiento: un script de tema que bloquee el renderizado, o CSS adicional por tema, puede retrasar el primer pintado. La monitorización de velocidad de página de LoadFocus ejecuta auditorías Lighthouse programadas, con una categoría de accesibilidad, para que siga las puntuaciones a lo largo del tiempo. Para el panorama general, lea pruebas de rendimiento y métricas de accesibilidad.

Preguntas frecuentes

¿El modo oscuro ahorra batería?

Solo en pantallas donde los píxeles oscuros consumen menos, como las AMOLED. web.dev cita ahorros de hasta el 60 % en estudios de caso en Android de aplicaciones de Google. En pantallas LCD la retroiluminación sigue encendida, así que el ahorro es pequeño o nulo.

¿Cómo detecta un sitio web el modo oscuro?

Con la media query prefers-color-scheme en CSS, o window.matchMedia("(prefers-color-scheme: dark)") en JavaScript. Refleja el ajuste del sistema operativo o del navegador del usuario.

¿Qué hace la propiedad color-scheme?

Indica al navegador qué esquemas admite su página, para que adapte el fondo, las barras de desplazamiento y los controles de formulario por defecto. Sus propios elementos los sigue estilando usted, por ejemplo con prefers-color-scheme o light-dark().

¿El modo oscuro es mejor para la accesibilidad?

Depende de la persona. Algunas, también con baja visión, prefieren texto claro sobre oscuro. Otras leen mejor con fondos claros. Ofrezca ambos y mantenga un contraste alto en cada uno.

¿Debo usar negro puro?

Normalmente no. Un gris muy oscuro con texto blanco roto es menos duro. En pantallas AMOLED el negro puro puede ahorrar más energía, así que es un equilibrio.