Interested Article - Тёмный режим

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

История

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

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

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

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

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

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

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

Поддержка

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

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

Пример на CSS :

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

Пример JavaScript :

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

Примечания

  1. . hisour . Дата обращения: 2 мая 2022. 2 мая 2022 года.
  2. . esputnik . Дата обращения: 2 мая 2022. 16 мая 2022 года.
  3. . cnet . Дата обращения: 2 мая 2022. 25 февраля 2021 года.
  4. Porter, Jon . The Verge (3 июня 2019). Дата обращения: 5 июня 2019. 7 августа 2019 года.
  5. . . Дата обращения: 18 марта 2021. 18 марта 2021 года.
  6. Walsh, David . David Walsh Blog (28 января 2019). Дата обращения: 18 марта 2021. 17 марта 2021 года.
  7. . 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 года.
Источник —

Same as Тёмный режим