Modo oscuro

El modo oscuro, tema oscuro, modo nocturno o esquema de color claro sobre fondo oscuro es una combinación de colores que utiliza texto, iconos y elementos de la interfaz gráfica de usuario de colores claros sobre un fondo oscuro. Se suele hablar de ello en el diseño de interfaces de usuario y diseño web . Muchos sitios web y sistemas operativos modernos ofrecen al usuario un modo de visualización claro sobre fondo oscuro opcional.

Algunos usuarios encuentran las pantallas en modo oscuro más atractivas visualmente y afirman que puede reducir la fatiga visual . ^{[ 2 ]} Mostrar blanco con brillo máximo consume aproximadamente seis veces más energía que el negro puro en un Google Pixel de 2016 , que tiene una pantalla OLED . ^{[ 3 ]} Sin embargo, las pantallas LED convencionales pueden no beneficiarse de un menor consumo de energía; pero si una pantalla LED tiene funciones de atenuación parcial, aún se beneficia de un menor consumo de energía. ^{[ 4 ] [ 5 ]} La mayoría de los sistemas operativos modernos admiten un esquema de color claro sobre oscuro opcional. ^{[ 6 ]}

Microsoft introdujo los temas de alto contraste en Windows 95. Posteriormente, Microsoft introdujo un tema oscuro en la Actualización de Aniversario de Windows 10 en 2016. ^{[ 7 ]} En 2018, Apple siguió en macOS Mojave . ^{[ 8 ]} En septiembre de 2019, iOS 13 y Android 10 introdujeron modos oscuros. ^{[ 9 ] [ 10 ]} Algunos sistemas operativos proporcionan herramientas para cambiar el estado del modo oscuro automáticamente al atardecer o al amanecer. ^{[ 11 ]} En 2019 se creó una opción "prefers-color-scheme" para desarrolladores web front-end , que es una propiedad CSS que indica la elección del usuario para que su sistema utilice un tema de color claro u oscuro. ^{[ 12 ]} Firefox y Chromium tienen un tema oscuro opcional para todas las pantallas internas. También es posible que desarrolladores de terceros implementen sus propios temas oscuros. ^{[ 13 ]} También hay una variedad de complementos para navegadores que pueden cambiar el tema de los sitios web con esquemas de color oscuro, alineándose también con el tema del sistema. ^{[ 11 ]} Las versiones móviles y de escritorio de Wikipedia recibieron una opción de modo oscuro en 2024. ^{[ 14 ] [ 15 ]}

En CSS existe una prefers-color-schemeconsulta de medios para detectar si el usuario ha solicitado un esquema de color claro u oscuro y servirle el esquema de color solicitado. Esto puede indicarse a partir de las preferencias del sistema operativo del usuario o de un agente de usuario . ^{[ 12 ] [ 16 ]}

Ejemplo de CSS:

@media ( prefers-color - scheme : dark ) { body { color : #ccc ; background : #222 ; } }

< span style = "background-color: light - dark(#fff, #333); color: light-dark(#333, #fff);" > </span>

Ejemplo de JavaScript: ^{[ 17 ]}

if ( window . matchMedia ( '(prefers-color-scheme: dark)' ). matches ) { dark (); }

Los esquemas de color claro sobre fondo oscuro requieren menos energía para mostrarse en pantallas OLED . Esto repercute positivamente en la duración de la batería y reduce el consumo de energía. ^{[ 18 ]}

Si bien una pantalla OLED consume alrededor del 40 % de la energía de una pantalla LCD al mostrar una imagen predominantemente negra, puede consumir más del triple de energía al mostrar una imagen con fondo blanco, como un documento o un sitio web. ^{[ 19 ]} Esto puede resultar en una menor duración de la batería y un mayor consumo de energía, a menos que se utilice un esquema de color claro sobre oscuro. El menor consumo de energía a largo plazo también puede prolongar la duración de la batería o la vida útil de la pantalla y la batería.

El ahorro energético que se consigue con un esquema de color claro sobre oscuro se debe al funcionamiento de las pantallas OLED: en una pantalla OLED, cada subpíxel genera su propia luz y solo consume energía al generarla. Esto contrasta con el funcionamiento de una pantalla LCD: en una pantalla LCD, los subpíxeles bloquean o permiten el paso de la luz de una retroiluminación LED siempre encendida.

Los esquemas de color " AMOLED Black" (que usan negro puro en lugar de gris oscuro) no necesariamente ahorran más energía que otros esquemas de color claro sobre oscuro que usan gris oscuro en lugar de negro, ya que el consumo de energía en una pantalla AMOLED disminuye proporcionalmente al brillo promedio de los píxeles mostrados. Si bien es cierto que el negro AMOLED ahorra más energía que el gris oscuro, el ahorro energético adicional suele ser insignificante; el negro AMOLED solo proporcionará un ahorro energético adicional de menos del 1%, por ejemplo, en comparación con el gris oscuro que se usa en el tema oscuro para las aplicaciones oficiales de Android de Google. ^{[ 20 ]} En noviembre de 2018, Google confirmó que el modo oscuro en Android ahorraba batería. ^{[ 21 ]}

Algunos argumentan que un esquema de color con texto claro sobre un fondo oscuro es más fácil de leer en la pantalla, porque el brillo general más bajo causa menos fatiga visual, mientras que otros argumentan lo contrario. ^{[ 22 ] [ 23 ] [ 24 ]} Algunas páginas web están diseñadas para fondos blancos; los recursos de imagen ( GIF , PNG , SVG , WOFF , etc.) pueden usarse incorrectamente causando artefactos visuales si se fuerza el modo oscuro (en lugar de diseñarlo) con un complemento como Dark Reader.

• AMOLED
• Blackle
• Turno de noche (software)
• Luz nocturna (ventanas)
• Solarizado (esquema de colores)