Цветовая гамма «светлое на темном»
Цветовая схема «светлый на темном» , более известная как темный режим, темная тема или ночной режим — это цветовая схема , в которой используется светлый текст, значки и элементы графического пользовательского интерфейса на темном фоне. Это часто обсуждается с точки зрения дизайна пользовательского интерфейса компьютера и веб-дизайна . Многие современные веб-сайты и операционные системы предлагают пользователю дополнительный режим отображения «светлый на темном».
Некоторые пользователи находят дисплеи в темном режиме более привлекательными и утверждают, что он может снизить нагрузку на глаза . [ 1 ] Отображение белого цвета при полной яркости потребляет примерно в шесть раз больше энергии, чем чисто черный цвет на Google Pixel 2016 года с OLED-дисплеем . [ 2 ] Однако обычные светодиодные дисплеи не могут выиграть от снижения энергопотребления. [ 3 ] Большинство современных операционных систем поддерживают дополнительную цветовую схему «светлый на темном». [ 4 ]
История
[ редактировать ]
Предшественники современных компьютерных экранов, такие как электронно-лучевые осциллографы, осциллографы и т. д., имели тенденцию строить графики и представлять другой контент в виде светящихся следов на черном фоне.
С появлением компьютерных экранов первоначально пользовательские интерфейсы формировались на электронно-лучевых трубках (ЭЛТ), подобных тем, которые используются в осциллографах или осциллографах. Люминофор , и обычно был очень темного цвета и ярко загорался, когда на него попадал электронный луч казался белым, зеленым, синим или янтарным на черном фоне, в зависимости от люминофора, нанесенного на монохромный экран. Экраны RGB продолжали работать аналогичным образом, используя все включенные лучи для формирования белого цвета.
С появлением телетекста было проведено исследование того, какие первичные и вторичные цвета и комбинации света лучше всего подходят для этого нового средства. [ 5 ] Голубой или желтый на черном обычно оказывался оптимальным из палитры черного, красного, зеленого, желтого, синего, пурпурного, голубого и белого.
Противоположный набор цветов, цветовая схема «темный на светлом» , изначально был представлен в WYSIWYG текстовых процессорах для имитации чернил на бумаге и стал нормой.
Microsoft представила темную тему в юбилейном обновлении Windows 10 в 2016 году. [ 6 ] В 2018 году Apple последовала примеру macOS Mojave . [ 7 ] В сентябре 2019 года в iOS 13 и Android 10 появились темные режимы. [ 8 ] [ 9 ]
Firefox и Chromium имеют дополнительную темную тему для всех внутренних экранов. Сторонние разработчики также смогут реализовать свои собственные темные темы. [ 10 ]
была создана опция «предпочитает цветовую схему» В 2019 году для интерфейсных веб-разработчиков , представляющая собой свойство 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 (prefers-color-scheme: dark) {
body {
color: #ccc;
background: #222;
}
}
Пример JavaScript: [ 22 ]
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
dark();
}
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ Камминс, Элеонора (21 ноября 2018 г.). «Темный режим безопаснее для глаз и аккумулятора» . Популярная наука . Архивировано из оригинала 21 января 2023 года.
- ^ Эмили Прайс (11 ноября 2018 г.). «Используйте темный режим для экономии заряда аккумулятора телефона» . Лайфхакер . Архивировано из оригинала 27 января 2023 года . Проверено 20 марта 2021 г.
- ^ Эйсфельд, Генриетта; Кристаллович, Феликс (2020). The Rise of Dark Mode: качественное исследование новой тенденции в дизайне пользовательского интерфейса .
- ^ Мерфи, Дэвид (28 октября 2020 г.). «Примите зло, включив темный режим в каждом приложении» . Лайфхакер . Архивировано из оригинала 16 ноября 2020 года . Проверено 15 ноября 2020 г.
- ^ Петтерсон, Руна (март 1985 г.). «Использование цветов в телетексте и видеотексе» . Исследовательские ворота .
- ^ «Самые интересные функции Anniversary Update: мнение пользователей Windows 10» . ПКМир . Архивировано из оригинала 30 июля 2024 года . Проверено 7 августа 2023 г.
- ^ «macOS Mojave: темный режим, стеки и многое другое» . МакСлухи . 25 октября 2019 года. Архивировано из оригинала 8 августа 2022 года . Проверено 8 августа 2022 г.
- ^ Хардвик, Тим (6 июня 2019 г.). «Как включить темный режим в iOS 13» . МакСлухи . Архивировано из оригинала 8 августа 2022 года . Проверено 8 августа 2022 г.
- ^ Каллахэм, Джон (3 сентября 2019 г.). «Вот как включить режим темной темы Android 10» . Администрация Андроида . Архивировано из оригинала 8 августа 2022 года . Проверено 8 августа 2022 г.
- ^ Портер, Джон (3 июня 2019 г.). «Тёмный режим появится в iOS 13» . Грань . Архивировано из оригинала 7 августа 2019 года . Проверено 5 июня 2019 г.
- ^ Перейти обратно: а б «предпочитает-цветовую-схему — CSS: каскадные таблицы стилей» . Веб-документы MDN . Архивировано из оригинала 18 марта 2021 года . Проверено 18 марта 2021 г.
- ^ Мехта, Иван (12 июля 2024 г.). «Мобильный сайт Википедии наконец-то получил темный режим» . ТехКранч . Архивировано из оригинала 13 июля 2024 года . Проверено 13 июля 2024 г.
- ^ Парди, Кевин (29 июля 2024 г.). «Тьма царит в Википедии, когда вступает в силу официальный темный режим» . Арс Техника . Архивировано из оригинала 29 июля 2024 года . Проверено 29 июля 2024 г.
- ^ Готцеген, Гордон (10 ноября 2018 г.). «Использование темного режима Android увеличивает срок службы батареи, подтверждает Google» . CNET . Архивировано из оригинала 27 декабря 2022 года.
- ^ Стоукс, Джон. (11 августа 2009 г.) В сентябре этого года OLED больше не появится «через три-пять лет». Архивировано 25 января 2012 г. в Wayback Machine . Arstechnica.com. Проверено 4 октября 2011 г.
- ^ Рага, Дилан (27 июня 2019 г.). «Нет, «черный AMOLED» НЕ экономит заряд батареи больше, чем темно-серый» . ХДА .
- ^ Уэлч, Крис (2 ноября 2018 г.). «Google подтверждает, что темный режим очень помогает продлить срок службы батареи на Android» . Грань . Архивировано из оригинала 8 декабря 2019 года . Проверено 30 января 2020 г.
- ^ Шарма, Адамья (29 июня 2020 г.). «Любите темный режим? Вот почему вы все равно можете его избегать» . Администрация Андроида . Архивировано из оригинала 24 сентября 2020 года . Проверено 12 сентября 2020 г.
- ^ Кларк, Лори (30 июля 2019 г.). «Темный режим не так полезен для ваших глаз, как вы думаете» . Проводная Великобритания . ISSN 1357-0978 . Архивировано из оригинала 22 июня 2023 года . Проверено 12 сентября 2020 г.
- ^ Будиу, Ралука (2 февраля 2020 г.). «Темный режим или светлый режим: что лучше?» . Нильсен Норман Групп . Архивировано из оригинала 14 февраля 2023 года.
- ^ Уолш, Дэвид (28 января 2019 г.). «предпочитает цветовую схему: CSS Media Query» . Блог Дэвида Уолша . Архивировано из оригинала 17 марта 2021 года . Проверено 18 марта 2021 г.
- ^ «Window.matchMedia() — веб-API» . Веб-документы MDN . Архивировано из оригинала 2 марта 2021 года . Проверено 18 марта 2021 г.
Метод matchMedia() интерфейса Window возвращает новый объект MediaQueryList, который затем можно использовать для определения того, соответствует ли документ строке медиа-запроса, а также для мониторинга документа, чтобы определить, когда он соответствует (или перестает соответствовать) этому медиа-запросу.
Цветовые темы | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Наука о цвете |
|  | ||||||||
| Цвет философия |
| |||||||||
| Условия цвета |
| |||||||||
| Цвет организации | ||||||||||
| Имена |
| |||||||||
| Связанный | ||||||||||
