Тёмный режим

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

История

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

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

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

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

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

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

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

Поддержка

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

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

Пример на CSS:

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

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

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

Примечания

1. Светло-темная цветовая схема  (неопр.). hisour. Дата обращения: 2 мая 2022. Архивировано 2 мая 2022 года.
2. How-To: переходим на темный режим в браузерах и почте  (неопр.). esputnik. Дата обращения: 2 мая 2022. Архивировано 16 мая 2022 года.
3. Using Android's dark mode improves battery life, Google confirms  (неопр.). cnet. Дата обращения: 2 мая 2022. Архивировано 25 февраля 2021 года.
4. Porter, Jon. Dark mode is coming to iOS 13  (неопр.). The Verge (3 июня 2019). Дата обращения: 5 июня 2019. Архивировано 7 августа 2019 года.
5. prefers-color-scheme - CSS: Cascading Style Sheets | MDN  (неопр.). MDN Web Docs. Дата обращения: 18 марта 2021. Архивировано 18 марта 2021 года.
6. Walsh, David. prefers-color-scheme: CSS Media Query  (неопр.). David Walsh Blog (28 января 2019). Дата обращения: 18 марта 2021. Архивировано 17 марта 2021 года.
7. Window.matchMedia() - Web APIs | MDN  (неопр.). developer.mozilla.org. — «The Window interface's matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query». Дата обращения: 18 марта 2021. Архивировано 17 марта 2021 года.