Тёмный режим

(перенаправлено с «Тёмная тема»)

Тёмный режим (тёмная тема, англ. 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 года.