Тёмный режим

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

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

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

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

Microsoft представила тёмную тему в юбилейном обновлении Windows 10 в 2016 году.^[3] В 2018 году Apple вышла на macOS Mojave.^[4]В сентябре 2019 года в iOS 13 и Android 10 появились тёмные режимы^[5][6][7] Некоторые операционные системы предоставляют инструменты для автоматического изменения состояния тёмного режима на закате или восходе солнца.^[8]

Firefox и Chromium имеют опциональную тёмную тему для всех внутренних экранов. Также у сторонних разработчиков появится возможность реализовывать свои собственные тёмные темы.^[9] Существует также множество надстроек для браузера, которые могут перенастраивать веб-сайты на тёмные цветовые схемы, а также в соответствии с системной темой.

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

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

Плюсами тёмного режима считаются^[12]:

• экономия батареи^[13];
• снижение нагрузки на глаза пользователей;
• улучшение дизайна сайтов и приложений.

Переход в тёмный режим поддерживается многими современными операционными системами, в том числе Windows (начиная с Windows 10 Anniversary Update), macOS 10.14, iOS 13 и Android 10. В браузерах Firefox и Chromium возможна настройка на тёмный режим.

С 2019 года в CSS существует свойство «prefers-color-scheme» — предпочтение пользователя об использовании тёмного режима^[14].

^[15][16]

Пример

@media (prefers-color-scheme: dark) {
    body {
        color: #ccc;
        background: #222;
    }
}

Пример JavaScript:^[17]

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    dark();
}