De Wikipedia, la enciclopedia libre
Saltar a navegación Saltar a búsqueda
El videojuego Zork que se ejecuta en una pantalla CRT verde sobre negro
Versiones de un sitio web en modo de visualización normal (izquierda) y modo oscuro (derecha)

El esquema de color claro sobre oscuro , también llamado modo negro , modo oscuro , tema oscuro o modo nocturno , es un esquema de color que utiliza texto, íconos y elementos de la interfaz gráfica de usuario de colores claros sobre un fondo oscuro y que a menudo se discute 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 de luz sobre oscuridad opcional.

Algunos usuarios encuentran que las pantallas en modo oscuro son más atractivas visualmente y pueden reducir el consumo de energía. [1] Mostrar el blanco con brillo total consume aproximadamente seis veces más energía que el negro puro en un Google Pixel 2016 , que tiene una pantalla OLED . [2] Además, las manchas en la superficie de una pantalla parecen menos visibles.

La mayoría de los sistemas operativos modernos admiten un esquema de color claro sobre oscuro opcional. [3] El modo nocturno también puede ser un esquema de visualización que utiliza menos luz azul (ya sea oscura sobre la luz o de otro modo), por ejemplo, turno de noche en dispositivos Apple o modo nocturno en Android . Las pantallas con luz azul reducida pueden mejorar la calidad del sueño.

Historia [ editar ]

Los predecesores de las pantallas de las computadoras 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 computadora, originalmente se formaron interfaces de usuario en CRT como las que se usan para 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 ser blanco, verde, azul o ámbar sobre un fondo negro, dependiendo de los fósforos aplicados en una pantalla monocromática . Las pantallas RGB continuaron funcionando de manera similar, usando todos los haces configurados en "on" para formar el blanco.

Con la llegada del teletexto , se investigó qué combinaciones y colores de luz primarios y secundarios funcionaban mejor para este nuevo medio. [ cita requerida ] Normalmente se encontró que el cian o amarillo sobre negro era óptimo 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.

Reproductor de audio con tema oscuro

Durante la década de 2010, muchos sitios web y sistemas operativos de teléfonos inteligentes agregaron opciones de modo oscuro. Firefox y Chromium tienen un tema oscuro opcional para todas las pantallas internas, y en 2019, Apple anunció que un modo claro sobre oscuro estaría disponible en todas las aplicaciones nativas en iOS 13 y iPadOS . También será posible que los desarrolladores externos implementen sus propios temas oscuros. [4]

En 2019, se creó una opción de "esquema de color preferido" para los desarrolladores web front-end , que es una propiedad de CSS que indica la elección del usuario para que su sistema utilice un tema de color claro u oscuro. [5]

Uso de energía [ editar ]

Los esquemas de colores claros sobre oscuros requieren menos energía para mostrarse en pantallas OLED . Esto tiene un impacto positivo en la duración de la batería y el consumo de energía. [6]

Si bien un OLED consumirá alrededor del 40% de la energía de una pantalla LCD que muestra una imagen que es principalmente negra, puede usar más de tres veces más energía para mostrar una imagen con un fondo blanco, como un documento o un sitio web. [7] Esto puede reducir la duración de la batería y el uso de energía a menos que se utilice un esquema de color claro sobre oscuro. El uso reducido de energía 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 usando un esquema de color claro sobre oscuro se debe a cómo funcionan las pantallas OLED: en una pantalla OLED, cada subpíxel genera su propia luz y solo consume energía cuando genera 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 a el brillo medio de los píxeles mostrados. Si bien es cierto que el negro AMOLED ahorra más energía que el gris oscuro, los ahorros de energía adicionales suelen ser insignificantes; El negro AMOLED 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. [8] En noviembre de 2018, Google confirmó que el modo oscuro en Android salvó la vida de la batería. [9]

Problemas con la web [ editar ]

Algunos [10] [11] [12] 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 [13] [14] argumentan lo contrario. La advertencia es que la mayoría de las páginas de la web están diseñadas para fondos blancos; Las imágenes GIF y PNG con un bit de transparencia en lugar de canales alfa tienden a mostrarse con contornos entrecortados, además de causar problemas con otros elementos gráficos.

No es necesario que un diseño web funcione bien con un solo esquema de color. Hay muchos mecanismos de arquitectura web que permiten que los diseños funcionen bien con cualquier esquema de color que el usuario prefiera, y CSS agrega "modo de colores forzados" para las preferencias, como para el "Modo oscuro". [15] Aunque los diseñadores rara vez lo utilizan, esta flexibilidad técnica es producto de la preocupación del arquitecto web por la accesibilidad y el empoderamiento de las preferencias del usuario. Wikipedia es un ejemplo de un sitio que permite la personalización casi total de su esquema de color CSS, disponible a través de la página de preferencias del sitio.

Hay una prefers-color-schemefunción de medios en CSS , para detectar si el usuario ha solicitado un esquema de color claro u oscuro y servir el esquema de color solicitado. Puede indicarse a partir de la preferencia del sistema operativo del usuario o del agente de usuario . [16] [17]

Ejemplo de CSS:

@ media  ( prefiere el esquema de color :  oscuro )  {  cuerpo  {  color :  # 999 ;  fondo :  # 000 ;  } }

Ejemplo de JavaScript [18] :

if  ( ventana . matchMedia ( '(prefiere-esquema-de-color: oscuro)' ). coincide )  {  oscuro (); }

Ver también [ editar ]

  • Blackle
  • Solarizado (combinación de colores)
  • OLED

Referencias [ editar ]

  1. ^ "El modo oscuro es más agradable para la vista y la batería" . 21 de noviembre de 2018.
  2. ^ Emily Price (11 de noviembre de 2018). "Utilice el modo oscuro para conservar la energía de la batería de su teléfono" . Lifehacker . Consultado el 20 de marzo de 2021 .
  3. ^ David Murphy. "Acepta el mal habilitando el modo oscuro en cada aplicación" . Lifehacker . Consultado el 15 de noviembre de 2020 .
  4. ↑ Porter, Jon (3 de junio de 2019). "El modo oscuro llega a iOS 13" . The Verge . Consultado el 5 de junio de 2019 .
  5. ^ "prefiere el esquema de color" . Documentos web de MDN . Consultado el 30 de abril de 2020 .
  6. ^ Gottsegen, Gordon. "Usar el modo oscuro de Android mejora la duración de la batería, confirma Google" . CNET .
  7. ^ Stokes, Jon. (2009-08-11) Este septiembre, OLED ya no está "dentro de tres o cinco años". Archivado 2012-01-25 en Wayback Machine . Arstechnica.com. Consultado el 4 de octubre de 2011.
  8. ^ "No", AMOLED Black "NO ahorra más batería que el gris oscuro" . 27 de junio de 2019.
  9. ^ Welch, Chris (2 de noviembre de 2018). "Google confirma que el modo oscuro es una gran ayuda para la duración de la batería en Android" . The Verge .
  10. ^ SUN, Tong (29 de marzo de 2008). "El fondo oscuro es bueno para ti" . Colección Unix / Linux (* niX) . Consultado el 26 de marzo de 2016 .
  11. ^ Supuhstar (17 de enero de 2013). "¿Qué es más agradable para los ojos: oscuridad sobre luz o luz sobre oscuridad?" . Stack Exchange . Consultado el 26 de marzo de 2016 .
  12. ^ Rector, Gary (22 de mayo de 2015). "¿Qué es más agradable para los ojos: oscuridad sobre luz o luz sobre oscuridad?" . Stack Exchange . Consultado el 26 de marzo de 2016 .
  13. ^ "¿Te encanta el modo oscuro? He aquí por qué es posible que quieras evitarlo" . Autoridad de Android . 2020-06-29 . Consultado el 12 de septiembre de 2020 .
  14. ↑ Clarke, Laurie (30 de julio de 2019). "El modo oscuro no es tan bueno para tus ojos como crees" . Reino Unido cableado . ISSN 1357-0978 . Consultado el 12 de septiembre de 2020 . 
  15. ^ "Nivel 1 del módulo de ajuste de color CSS" . www.w3.org . Consultado el 2 de junio de 2020 .
  16. ^ "prefiere-esquema-de-color - CSS: Hojas de estilo en cascada | MDN" . Documentos web de MDN . Consultado el 18 de marzo de 2021 .
  17. ↑ Walsh, David (28 de enero de 2019). "prefiere-esquema-de-color: CSS Media Query" . Blog de David Walsh . Consultado el 18 de marzo de 2021 .
  18. ^ "Window.matchMedia () - API web | MDN" . developer.mozilla.org . Consultado el 18 de marzo de 2021 . El método matchMedia () de la interfaz de Windows 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.