Respuesta corta: El modo oscuro muestra tu web con texto claro sobre fondo oscuro. La mayoría de las personas con visión normal leen mejor en modo claro, así que ofrece el oscuro como opción, no por defecto. Sigue el ajuste del sistema del visitante, pon un interruptor que recuerde la elección y revisa el contraste en los dos temas.
Qué dice la investigación sobre el modo oscuro
NN/g revisó los estudios académicos sobre el modo oscuro. En personas con visión normal, el rendimiento visual suele ser mejor en modo claro, mientras que algunas personas con cataratas y problemas parecidos pueden leer mejor en modo oscuro.
La ventaja del modo claro crece cuanto más pequeño es el texto. En un estudio, esta ventaja se notó con luz de noche simulada, pero no con luz de día simulada y brillante. Otro no encontró diferencias de cansancio entre los dos modos.
Un estudio sugiere que leer mucho en modo claro podría estar relacionado con la miopía. web.dev cita una investigación en la que a todas las personas con baja visión entrevistadas les disgustaban las imágenes invertidas, aunque muchas preferían el texto claro sobre un fondo oscuro.
¿Tu web debería ofrecer modo oscuro?
NN/g no recomienda poner el modo oscuro por defecto para un público general. En cambio, insiste en dejar que la gente cambie a él si quiere, sobre todo para leer textos largos.
También dice que la opción debería funcionar en todas las pantallas de la web, y que conviene usar el ajuste de modo oscuro del sistema operativo cuando existe.
Qué hace un buen modo oscuro
| Parte | Qué hace | Cuidado con |
|---|---|---|
| Ajuste del sistema | Abre en el tema que el visitante ya usa | Léelo con prefers-color-scheme (MDN) |
| Interruptor | Deja cambiar el tema en cualquier página | Nombra el botón por lo que hará y cambia el nombre al usarlo |
| Elección guardada | Mantiene el tema entre páginas y visitas | Aplícala antes de que se muestre la página, sin destello (web.dev) |
| Elementos del navegador | Campos de formulario y barras de desplazamiento acordes al tema | Declara color-scheme (web.dev) |
| Texto y fotos | Lectura cómoda sobre fondo oscuro | Evita el blanco puro y baja un poco el brillo de las fotos (web.dev) |
Partes tomadas de web.dev y de MDN, consultadas el 4 de noviembre de 2026; la fila del interruptor es consejo nuestro.
Cómo añadir modo oscuro a tu web
- Parte del ajuste del sistema del visitante en vez de imponer un tema a todos.
- Cuando el navegador no lo pueda saber, abre en modo claro.
- Pon un interruptor en la cabecera con un nombre claro, como «Cambiar a modo oscuro».
- Guarda la elección y aplícala antes de que se muestre la página, en todas las páginas.
- Declara color-scheme, para que los campos de formulario y las barras de desplazamiento sigan el tema.
- En modo oscuro, usa un blanco roto para el texto y baja un poco el brillo de las fotos.
- Revisa el contraste, los logos y los formularios en los dos temas antes de publicar.
Nuestra guía de contraste de color explica cómo revisar el contraste. La guía de la paleta de colores explica cómo elegir los colores.
Cómo resuelve nuestra web el modo claro y el oscuro
Leímos ocho de nuestras páginas como visitantes el 4 de noviembre de 2026, primero con el sistema en modo claro y luego en oscuro. En las 16 pruebas, la página abrió en el tema del sistema, cada vez con un interruptor llamado «Cambiar a modo oscuro» o «Cambiar a modo claro».
Un script en la cabecera de la página aplica la elección guardada antes de mostrarla. Después de cambiar a oscuro en la página de inicio, las siete páginas que abrimos a continuación siguieron oscuras, también al recargarlas.
En modo oscuro nuestro texto es un gris suave y no blanco puro, y la foto del caso de éxito de la página de inicio se oscurece un poco. El verificador axe no encontró fallos de contraste en la página de inicio ni en una guía, en ninguno de los dos temas.
Al escribir esta guía encontramos un fallo: nuestras páginas oscuras no declaraban color-scheme, así que el navegador dejaba en claro sus propios elementos. Lo añadimos el 4 de noviembre de 2026, y las ocho páginas oscuras ya lo declaran.
Antes de lanzar el modo oscuro
- La web abre en el tema del sistema del visitante.
- Todas las páginas tienen un interruptor con un nombre claro.
- La elección se mantiene entre páginas y visitas.
- Textos y botones pasan el contraste en los dos temas.
- Fotos, logos e íconos se ven bien sobre oscuro.
- Los campos de formulario y las barras siguen el tema.
RecuerdaEl modo oscuro es una opción, no el punto de partida. Sigue el ajuste del visitante, deja que cambie en cualquier página y revisa todo en los dos temas.
Si quieres una web que funcione en los dos temas, nuestro servicio de diseño web puede hacerla y revisarla contigo.
Respuestas rápidas sobre el modo oscuro
¿El modo oscuro es mejor para la vista?
Para la mayoría, no. En la revisión de estudios de NN/g, las personas con visión normal rindieron mejor en modo claro casi siempre, y el cansancio no cambió. Algunas personas con cataratas pueden leer mejor en modo oscuro, y un estudio relacionó leer mucho en modo claro con la miopía.
¿Mi web debería ser oscura por defecto?
NN/g no recomienda el modo oscuro por defecto para un público general. Parte del ajuste del sistema de cada visitante y abre en modo claro cuando el navegador no lo puede saber. Después, deja que la gente cambie cuando quiera.
¿Cómo sabe una web que el visitante quiere modo oscuro?
Con la característica prefers-color-scheme. MDN explica que detecta si el usuario pidió un tema claro u oscuro, con un ajuste de su sistema operativo o de su navegador. Tu hoja de estilos aplica entonces los colores que correspondan.
¿Para qué sirve color-scheme?
Le dice al navegador qué temas admite tu página. En modo oscuro, según web.dev, el navegador puede dibujar los campos de formulario con fondo oscuro y texto claro. También ajusta las barras de desplazamiento, para que sus propios elementos vayan con tu tema.
¿Tengo que cambiar mis fotos para el modo oscuro?
Normalmente, un poco. Un estudio que cita web.dev encontró que la mayoría prefiere imágenes algo menos vibrantes y brillantes en modo oscuro, así que un filtro suave ayuda. Revisa también logos e íconos: un logo oscuro puede desaparecer sobre un fondo oscuro.
Fuentes
Consultadas el 4 de noviembre de 2026. NN/g, en inglés: Dark Mode vs. Light Mode: Which Is Better? web.dev: prefers-color-scheme: hola oscuridad, mi vieja amiga. MDN, en inglés: prefers-color-scheme. Nuestro caso: ocho de nuestras páginas leídas en modo claro y oscuro, el 4 de noviembre de 2026.