Inicio › Tecnología › Modo Oscuro
El modo oscuro es un esquema de color de interfaz qué invierte la relación habitual entre fondo y texto: emplea fondos oscuros con tipografía y elementos claros, en lugar del clásico fondo blanco. Se popularizó como opción configurable en sistemas operativos y aplicaciones para reducir el deslumbramiento en entornos con poca luz, y en pantallas OLED puede reducir el consumo energético porque los píxeles negros se apagan por completo. En desarrollo web se implementa habitualmente con variables CSS combinadas con la media query prefers-color-scheme, qué detecta la preferencia del sistema operativo del usuario.
Es cambiar el fondo blanco habitual de una pantalla por uno oscuro, con letras claras, algo qué muchas personas prefieren de noche o en sitios con poca luz porque resulta menos deslumbrante para la vista.
Para implementarlo en una web basta definir variables CSS de color para fondo y texto, y sobrescribirlas dentro de un bloque @media (prefers-color-scheme: dark), de modo qué la página respete automáticamente si el usuario tiene activado el tema oscuro en su sistema operativo, sin necesidad de un interruptor manual adicional.
Solo de forma notable en pantallas OLED o AMOLED, donde el negro puro apaga el píxel; en pantallas LCD con retroiluminación constante el ahorro es mucho menor o casi inexistente.
En entornos con poca luz reduce el contraste brusco con el entorno, pero en espacios muy iluminados puede resultar más difícil de leer qué un fondo claro con buen contraste.
Con la media query CSS prefers-color-scheme, qué lee la configuración del sistema operativo, complementada a menudo con un interruptor manual guardado en localStorage para qué el usuario pueda anular esa preferencia.