Тёмный режим

Темный режим (темная тема, англ. Dark Mode, «цветовая схема „Свет-на-темном“») в дизайне пользовательского интерфейса — цветовая схема, в которой используется светлый текст на темном фоне.

История

Видеоигра Zork на дисплее CRT «зеленое на чёрном»

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

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

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

Преимущества

Плюсами темного режима считаются:

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

Поддержка

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

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

Пример

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

Пример JavaScript:

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