stringtranslate.com

Цветовая схема «светло-на-темном»

Тёмная тема для GNOME
Версии веб-сайта в обычном режиме отображения (слева) и в темном режиме (справа)

Цветовая схема « светло-на-темном» , более известная как темный режим, темная тема или ночной режим , — это цветовая схема , которая использует светлый текст, значки и графические элементы пользовательского интерфейса на темном фоне. Ее часто обсуждают в терминах дизайна пользовательского интерфейса компьютера и веб-дизайна . Многие современные веб-сайты и операционные системы предлагают пользователю опциональный режим отображения «светло-на-темном».

Некоторые пользователи считают темный режим отображения визуально более привлекательным и утверждают, что он может снизить нагрузку на глаза . [1] Отображение белого цвета на полной яркости потребляет примерно в шесть раз больше энергии, чем чисто черный на Google Pixel 2016 года , который имеет OLED-дисплей . [2] Однако обычные светодиодные дисплеи не могут выиграть от снижения энергопотребления. [3] Большинство современных операционных систем поддерживают дополнительную цветовую схему «светлый на темном». [4]

История

Видеоигра Zork, запущенная на зеленом ЭЛТ-дисплее на черном фоне

Предшественники современных компьютерных экранов, такие как электронно-лучевые осциллографы, осциллографы и т. д., имели тенденцию строить графики и представлять другой контент в виде светящихся следов на черном фоне.

С появлением компьютерных экранов изначально пользовательские интерфейсы формировались на электронно-лучевых трубках (ЭЛТ), подобных тем, что используются в осциллографах или осциллоскопах. Обычно фосфор был очень темного цвета и ярко загорался, когда на него попадал электронный луч , становясь белым, зеленым, синим или янтарным на черном фоне, в зависимости от фосфора, нанесенного на монохромный экран. Экраны RGB продолжали работать аналогичным образом, используя все лучи, установленные на «включено», для формирования белого цвета.

С появлением телетекста были проведены исследования, чтобы выяснить, какие основные и вторичные цвета света и их комбинации лучше всего подходят для этой новой среды. [5] Обычно считалось, что голубой или желтый на черном являются оптимальными из палитры черного, красного, зеленого, желтого, синего, пурпурного, голубого и белого.

Противоположный набор цветов, цветовая схема «темное на светлом» , изначально был представлен в текстовых процессорах WYSIWYG для имитации чернил на бумаге и стал нормой.

Microsoft представила тёмную тему в Anniversary Update Windows 10 в 2016 году. [6] В 2018 году Apple последовала её примеру в macOS Mojave . [7] В сентябре 2019 года iOS 13 и Android 10 представили тёмные режимы. [8] [9]

Firefox и Chromium имеют опциональную темную тему для всех внутренних экранов. Также сторонние разработчики смогут реализовать свои собственные темные темы. [10]

В 2019 году для разработчиков интерфейсных веб-приложений была создана опция «prefers-color-scheme» , представляющая собой свойство CSS , которое сигнализирует о выборе пользователем для своей системы использования светлой или темной цветовой темы. [11]

В июле 2024 года мобильный сайт Википедии получил тёмный режим. [12] Позже тёмный режим получил и десктопный сайт. [13]

Использование энергии

Цветовые схемы «светлое на темном» требуют меньше энергии для отображения на OLED -дисплеях. Это положительно влияет на срок службы батареи и снижает потребление энергии. [14]

В то время как OLED будет потреблять около 40% мощности ЖК-дисплея, отображающего изображение, которое в основном черное, он может использовать в три раза больше энергии для отображения изображения с белым фоном, например документа или веб-сайта. [15] Это может привести к сокращению срока службы батареи и более высокому потреблению энергии, если не используется цветовая схема «светлое на темном». Долгосрочное снижение потребления энергии может также продлить срок службы батареи или срок службы дисплея и батареи.

Экономия энергии, которая может быть достигнута с помощью цветовой схемы «светлый на темном», обусловлена ​​принципом работы OLED-экранов: в OLED-экране каждый субпиксель генерирует свой собственный свет, и он потребляет энергию только при генерации света. Это отличается от принципа работы ЖК-дисплея: в ЖК-дисплее субпиксели либо блокируют, либо пропускают свет от постоянно включенной (горит) светодиодной подсветки .

Цветовые схемы « AMOLED Black» (которые используют чистый черный вместо темно-серого) не обязательно экономят больше энергии, чем другие цветовые схемы «светлый на темном», которые используют темно-серый вместо черного, поскольку энергопотребление на экране AMOLED уменьшается пропорционально средней яркости отображаемых пикселей. Хотя верно, что черный AMOLED действительно экономит больше энергии, чем темно-серый, дополнительная экономия энергии часто незначительна; черный AMOLED даст дополнительную экономию энергии всего менее 1%, например, по сравнению с темно-серым, который используется в темной теме для официальных приложений Google для Android. [16] В ноябре 2018 года Google подтвердила, что темный режим на Android экономит заряд батареи. [17]

Проблемы с Интернетом

Некоторые утверждают, что цветовая схема со светлым текстом на темном фоне легче читается на экране, потому что более низкая общая яркость вызывает меньшее напряжение глаз. Другие [18] [19] [20] утверждают обратное. Некоторые страницы в Интернете разработаны для белого фона; ресурсы изображений ( GIF , PNG , SVG , WOFF и т. д.) могут использоваться ненадлежащим образом, вызывая визуальные артефакты, если темный режим принудительно включен (вместо того, для которого он предназначен) с помощью плагина, такого как darkreader.

prefers-color-schemeВ CSS есть медиа-функция , которая определяет, запросил ли пользователь светлую или темную цветовую схему, и предоставляет запрошенную цветовую схему. Это может быть указано в настройках операционной системы пользователя или в пользовательском агенте . [11] [21]

Пример CSS-стиля:

@ media ( предпочитаемая-цветовая-схема : темная ) { тело { цвет : #ccc ; фон : #222 ; } }          
< span style = "background-color: light-dark(#fff, #333); color: light-dark(#333, #fff);" ></ span >

Пример JavaScript: [22]

если ( окно . matchMedia ( '(предпочитает-цветовую-схему: темный)' ). соответствия ) { темный (); }

Смотрите также

Ссылки

  1. ^ Камминс, Элеанор (21 ноября 2018 г.). «Темный режим щадит глаза и экономит батарею». Popular Science . Архивировано из оригинала 21 января 2023 г.
  2. ^ Эмили Прайс (11 ноября 2018 г.). «Используйте темный режим для экономии заряда аккумулятора телефона». Lifehacker . Архивировано из оригинала 27 января 2023 г. Получено 20 марта 2021 г.
  3. ^ Айсфельд, Генриетта; Кристаллович, Феликс (2020). Расцвет темного режима: качественное исследование новой тенденции дизайна пользовательского интерфейса.
  4. ^ Мерфи, Дэвид (28 октября 2020 г.). «Примите зло, включив темный режим в каждом приложении». Lifehacker . Архивировано из оригинала 16 ноября 2020 г. Получено 15 ноября 2020 г.
  5. ^ Петтерсон, Руне (март 1985 г.). «Использование цветов в телетексте и видеотексе». ResearchGate .
  6. ^ "Самые захватывающие функции обновления Anniversary: ​​пользователи Windows 10 высказывают свое мнение". PCWorld . Архивировано из оригинала 30 июля 2024 г. Получено 7 августа 2023 г.
  7. ^ "macOS Mojave: Dark Mode, Stacks и многое другое". MacRumors . 25 октября 2019 г. Архивировано из оригинала 8 августа 2022 г. Получено 8 августа 2022 г.
  8. ^ Хардвик, Тим (6 июня 2019 г.). «Как включить темный режим в iOS 13». MacRumors . Архивировано из оригинала 8 августа 2022 г. Получено 8 августа 2022 г.
  9. ^ Каллахэм, Джон (3 сентября 2019 г.). «Вот как включить режим темной темы Android 10». Android Authority . Архивировано из оригинала 8 августа 2022 г. Получено 8 августа 2022 г.
  10. ^ Портер, Джон (3 июня 2019 г.). «Темный режим появится в iOS 13». The Verge . Архивировано из оригинала 7 августа 2019 г. . Получено 5 июня 2019 г. .
  11. ^ ab "prefers-color-scheme - CSS: каскадные таблицы стилей". MDN Web Docs . Архивировано из оригинала 18 марта 2021 г. Получено 18 марта 2021 г.
  12. ^ Мехта, Иван (12 июля 2024 г.). «Мобильный сайт Википедии наконец-то получил темный режим». TechCrunch . Архивировано из оригинала 13 июля 2024 г. Получено 13 июля 2024 г.
  13. ↑ Purdy, Kevin (29 июля 2024 г.). «Тьма царит над Википедией, поскольку официальный темный режим приходит к концу». Ars Technica . Архивировано из оригинала 29 июля 2024 г. Получено 29 июля 2024 г.
  14. ^ Готцеген, Гордон (10 ноября 2018 г.). «Использование темного режима Android увеличивает срок службы батареи, подтверждает Google». CNET . Архивировано из оригинала 27 декабря 2022 г.
  15. ^ Стоукс, Джон. (11 августа 2009 г.) В сентябре этого года OLED больше не будет «на расстоянии трех-пяти лет». Архивировано 25 января 2012 г. на Wayback Machine . Arstechnica.com. Получено 4 октября 2011 г.
  16. ^ Рага, Дилан (27 июня 2019 г.). «Нет, «черный AMOLED» НЕ экономит больше заряда батареи, чем темно-серый». XDA .
  17. ^ Уэлч, Крис (2 ноября 2018 г.). «Google подтверждает, что темный режим очень помогает экономить заряд батареи на Android». The Verge . Архивировано из оригинала 8 декабря 2019 г. Получено 30 января 2020 г.
  18. ^ Шарма, Адамья (29 июня 2020 г.). «Любите темный режим? Вот почему вам все равно стоит его избегать». Android Authority . Архивировано из оригинала 24 сентября 2020 г. . Получено 12 сентября 2020 г. .
  19. ^ Кларк, Лори (30 июля 2019 г.). «Темный режим не так полезен для ваших глаз, как вы думаете». Wired UK . ISSN  1357-0978. Архивировано из оригинала 22 июня 2023 г. Получено 12 сентября 2020 г.
  20. ^ Budiu, Raluca (2 февраля 2020 г.). «Темный режим против светлого режима: что лучше?». Nielsen Norman Group . Архивировано из оригинала 14 февраля 2023 г.
  21. ^ Уолш, Дэвид (28 января 2019 г.). "prefers-color-scheme: CSS Media Query". Блог Дэвида Уолша . Архивировано из оригинала 17 марта 2021 г. Получено 18 марта 2021 г.
  22. ^ "Window.matchMedia() - Web APIs". MDN Web Docs . Архивировано из оригинала 2 марта 2021 г. Получено 18 марта 2021 г. Метод matchMedia() интерфейса Window возвращает новый объект MediaQueryList, который затем можно использовать для определения соответствия документа строке медиа-запроса, а также для мониторинга документа с целью обнаружения его соответствия (или прекращения соответствия) этому медиа-запросу.