_in_Dark_theme.png/1280px-GNOME_Shell,_GNOME_Clocks,_Evince,_gThumb,_GNOME_Files_at_version_3.30_(2018-09)_in_Dark_theme.png)
Un esquema de color claro sobre oscuro , más conocido como modo oscuro, tema oscuro o modo nocturno , es un esquema de color que utiliza texto, íconos y elementos de interfaz gráfica de usuario de colores claros sobre un fondo oscuro. A menudo se analiza en términos de diseño de interfaz de usuario de computadora y diseño web . Muchos sitios web y sistemas operativos modernos ofrecen al usuario un modo de visualización opcional de claro sobre oscuro.
Algunos usuarios encuentran que las pantallas en modo oscuro son más atractivas visualmente y afirman que pueden reducir la fatiga visual . [1] Mostrar blanco con brillo completo consume aproximadamente seis veces más energía que el negro puro en un Google Pixel 2016 , que tiene una pantalla OLED . [2] Sin embargo, las pantallas LED convencionales no pueden beneficiarse de un consumo de energía reducido. [3] La mayoría de los sistemas operativos modernos admiten un esquema de color claro sobre oscuro opcional. [4]
Los predecesores de las pantallas de computadora modernas, como los oscilógrafos de rayos catódicos, los osciloscopios, etc., tendían a trazar gráficos e introducir otros contenidos como trazos brillantes sobre un fondo negro.
Con la introducción de las pantallas de ordenador, las interfaces de usuario se formaron originalmente en tubos de rayos catódicos (TRC) como los que se utilizan para los oscilógrafos u osciloscopios. El fósforo era normalmente de un color muy oscuro y se iluminaba intensamente cuando el haz de electrones lo golpeaba, apareciendo blanco, verde, azul o ámbar sobre un fondo negro, según el fósforo aplicado a una pantalla monocromática . Las pantallas RGB siguieron funcionando de forma similar, utilizando todos los haces configurados en "encendido" para formar el blanco.
Con la llegada del teletexto , se investigaron qué colores de luz primarios y secundarios y sus combinaciones funcionaban mejor para este nuevo medio. [5] Por lo general, se consideró que el cian o el amarillo sobre negro eran óptimos en una paleta de negro, rojo, verde, amarillo, azul, magenta, cian y blanco.
El conjunto de colores opuesto, un esquema de color oscuro sobre claro , se introdujo originalmente en los procesadores de texto WYSIWYG para simular tinta sobre papel y se convirtió en la norma.
Microsoft introdujo un tema oscuro en la actualización de aniversario de Windows 10 en 2016. [6] En 2018, Apple siguió con macOS Mojave . [7] En septiembre de 2019, iOS 13 y Android 10 introdujeron modos oscuros. [8] [9]
Firefox y Chromium tienen un tema oscuro opcional para todas las pantallas internas. Los desarrolladores externos también podrán implementar sus propios temas oscuros. [10]
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 de un usuario de que su sistema utilice un tema de color claro u oscuro. [11]
En julio de 2024, el sitio web móvil de Wikipedia recibió un modo oscuro. [12] El sitio web de escritorio más tarde también recibió un modo oscuro. [13]
Los esquemas de colores claros sobre oscuros requieren menos energía para visualizarse en pantallas OLED , lo que tiene un impacto positivo en la duración de la batería y reduce el consumo de energía. [14]
Mientras que un OLED consume alrededor del 40% de la energía de un LCD que muestra una imagen que es principalmente negra, puede utilizar más del triple de energía para mostrar una imagen con un fondo blanco, como un documento o un sitio web. [15] Esto puede provocar una reducción de la vida útil de la batería y un mayor consumo de energía a menos que se utilice un esquema de colores claros sobre oscuros. El consumo de energía reducido a largo plazo también puede prolongar la vida útil de la batería o la vida útil de la pantalla y la batería.
El ahorro de energía que se puede lograr con un esquema de colores claros sobre oscuros 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 generar luz. Esto contrasta con el funcionamiento de una pantalla LCD: en una pantalla LCD, los subpíxeles bloquean o permiten que pase la luz de una retroiluminación LED siempre encendida (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 AMOLED Black ahorra más energía que el gris oscuro, el ahorro de energía adicional a menudo es insignificante; AMOLED Black solo brindará un ahorro de energía adicional de menos del 1%, por ejemplo, sobre el gris oscuro que se usa en el tema oscuro para las aplicaciones oficiales de Android de Google. [16] En noviembre de 2018, Google confirmó que el modo oscuro en Android ahorraba batería. [17]
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. Otros [18] [19] [20] argumentan lo contrario. Algunas páginas de la web están diseñadas para fondos blancos; los recursos de imagen ( GIF , PNG , SVG , WOFF , etc.) se pueden usar de forma incorrecta y causar artefactos visuales si se fuerza el modo oscuro (en lugar de diseñarlo) con un complemento como darkreader.
Hay una prefers-color-schemefunción multimedia en CSS que detecta si el usuario ha solicitado un esquema de color claro u oscuro y ofrece el esquema de color solicitado. Puede indicarse desde la preferencia del sistema operativo del usuario o desde un agente de usuario . [11] [21]
Ejemplo de CSS:
@ media ( prefiere el esquema de color : oscuro ) { cuerpo { color : #ccc ; fondo : #222 ; } } < span style = "color de fondo: claro-oscuro(#fff, #333); color: claro-oscuro(#333, #fff);" ></ span > Ejemplo de JavaScript: [22]
si ( ventana . matchMedia ( '(prefiere-esquema-de-color: oscuro)' ). coincide ) { oscuro (); } El método matchMedia() de la interfaz Window devuelve un nuevo objeto MediaQueryList que luego se puede usar para determinar si el documento coincide con la cadena de consulta de medios, así como para monitorear el documento para detectar cuándo coincide (o deja de coincidir) con esa consulta de medios