stringtranslate.com

Esquema de colores claros sobre oscuros

Tema oscuro para GNOME
Versiones de un sitio web en modo de visualización normal (izquierda) y modo oscuro (derecha)

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]

Historia

El videojuego Zork ejecutándose en una pantalla CRT verde sobre negro

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]

Uso de energía

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]

Problemas con la web

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 (); }   

Véase también

Referencias

  1. ^ Cummins, Eleanor (21 de noviembre de 2018). «El modo oscuro es más cómodo para la vista y para la batería». Popular Science . Archivado desde el original el 21 de enero de 2023.
  2. ^ Emily Price (11 de noviembre de 2018). «Usa el modo oscuro para conservar la batería de tu teléfono». Lifehacker . Archivado desde el original el 27 de enero de 2023. Consultado el 20 de marzo de 2021 .
  3. ^ Eisfeld, Henriette; Kristallovich, Felix (2020). El auge del modo oscuro: un estudio cualitativo de una tendencia emergente en el diseño de interfaces de usuario.
  4. ^ Murphy, David (28 de octubre de 2020). "Acepta el mal activando el modo oscuro en todas las aplicaciones". Lifehacker . Archivado desde el original el 16 de noviembre de 2020 . Consultado el 15 de noviembre de 2020 .
  5. ^ Petterson, Rune (marzo de 1985). "Uso de colores en teletexto y videotexto". ResearchGate .
  6. ^ "Las características más interesantes de Anniversary Update: los usuarios de Windows 10 opinan". PCWorld . Archivado desde el original el 30 de julio de 2024 . Consultado el 7 de agosto de 2023 .
  7. ^ "macOS Mojave: modo oscuro, acumulaciones y más". MacRumors . 25 de octubre de 2019. Archivado desde el original el 8 de agosto de 2022 . Consultado el 8 de agosto de 2022 .
  8. ^ Hardwick, Tim (6 de junio de 2019). «Cómo habilitar el modo oscuro en iOS 13». MacRumors . Archivado desde el original el 8 de agosto de 2022. Consultado el 8 de agosto de 2022 .
  9. ^ Callaham, John (3 de septiembre de 2019). «A continuación, se explica cómo habilitar el modo de tema oscuro de Android 10». Android Authority . Archivado desde el original el 8 de agosto de 2022. Consultado el 8 de agosto de 2022 .
  10. ^ Porter, Jon (3 de junio de 2019). «El modo oscuro llegará a iOS 13». The Verge . Archivado desde el original el 7 de agosto de 2019. Consultado el 5 de junio de 2019 .
  11. ^ ab "prefers-color-scheme - CSS: hojas de estilo en cascada". MDN Web Docs . Archivado desde el original el 18 de marzo de 2021 . Consultado el 18 de marzo de 2021 .
  12. ^ Mehta, Ivan (12 de julio de 2024). «El sitio web móvil de Wikipedia finalmente obtiene un modo oscuro». TechCrunch . Archivado desde el original el 13 de julio de 2024. Consultado el 13 de julio de 2024 .
  13. ^ Purdy, Kevin (29 de julio de 2024). «La oscuridad reina en Wikipedia a medida que se implementa el modo oscuro oficial». Ars Technica . Archivado desde el original el 29 de julio de 2024. Consultado el 29 de julio de 2024 .
  14. ^ Gottsegen, Gordon (10 de noviembre de 2018). «El uso del modo oscuro de Android mejora la duración de la batería, confirma Google». CNET . Archivado desde el original el 27 de diciembre de 2022.
  15. ^ Stokes, Jon. (11 de agosto de 2009) Este septiembre, la tecnología OLED ya no está "a tres o cinco años de distancia". Archivado el 25 de enero de 2012 en Wayback Machine . Arstechnica.com. Consultado el 4 de octubre de 2011.
  16. ^ Raga, Dylan (27 de junio de 2019). "No, "AMOLED Black" NO ahorra más batería que Dark Gray". XDA .
  17. ^ 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 . Archivado desde el original el 8 de diciembre de 2019. Consultado el 30 de enero de 2020 .
  18. ^ Sharma, Adamya (29 de junio de 2020). "¿Te encanta el modo oscuro? Esta es la razón por la que es posible que aún quieras evitarlo". Android Authority . Archivado desde el original el 24 de septiembre de 2020. Consultado el 12 de septiembre de 2020 .
  19. ^ Clarke, Laurie (30 de julio de 2019). «El modo oscuro no es tan bueno para tus ojos como crees». Wired UK . ISSN  1357-0978. Archivado desde el original el 22 de junio de 2023. Consultado el 12 de septiembre de 2020 .
  20. ^ Budiu, Raluca (2 de febrero de 2020). "Modo oscuro vs. Modo claro: ¿cuál es mejor?". Nielsen Norman Group . Archivado desde el original el 14 de febrero de 2023.
  21. ^ Walsh, David (28 de enero de 2019). «prefers-color-scheme: CSS Media Query». Blog de David Walsh . Archivado desde el original el 17 de marzo de 2021. Consultado el 18 de marzo de 2021 .
  22. ^ "Window.matchMedia() - Web APIs". MDN Web Docs . Archivado desde el original el 2 de marzo de 2021 . Consultado el 18 de marzo de 2021 . 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