Русская Википедия:Тёмный режим

Материал из Онлайн справочника
Версия от 14:14, 21 сентября 2023; EducationBot (обсуждение | вклад) (Новая страница: «{{Русская Википедия/Панель перехода}} '''Тёмный режим''' ('''тёмная тема''', {{lang-en|Dark Mode}}, «цветовая схема „Свет-на-тёмном“»<ref name="hi">{{cite web|title=Светло-темная цветовая схема|url=https://www.hisour.com/ru/light-on-dark-color-scheme-26173/|website=hisour|access-date=2022-05-02|archive-date=2022-05-02|archive-url=https://web.archive.org...»)
(разн.) ← Предыдущая версия | Текущая версия (разн.) | Следующая версия → (разн.)
Перейти к навигацииПерейти к поиску

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

История

Файл:Zork on CRT display.jpg
Видеоигра 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();
}

Примечания

Шаблон:Примечания