Dark Mode и визуальный комфорт

1) Зачем темная тема

Комфорт глаз в низкой освещенности, меньше бликов и «световых вспышек».
Энергия: на OLED/AMOLED темные экраны тратят меньше батареи.
Фокус на данных: акцент на контент, а не на фон.
Ожидания пользователя: системный флаг `prefers-color-scheme` — стандарт де-факто.

2) Принципы

1. Темно-серый фон > чистый черный для UI-поверхностей (лучше читаемость и градации).
2. Контраст по контенту: не «белым по черному», а мягкие оттенки для длинных текстов.
3. Осторожная «светимость»: подсветки/акценты приглушенные, но различимые.
4. Глубина ≠ тени: работаем светлотой/размытой тенью, а не резкой контрастной.
5. Доступность: WCAG AA (минимум), видимый фокус и понятные состояния.
6. Системные настройки первичны: авто-переключение и «сниженное движение».

3) Палитра и токены (пример)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• Акценты в темном режиме на +8–12% светлее, чем в светлом.
• Используйте градации серого (4–5 шагов), избегая абсолютной #000 для больших площадей (исключение — AMOLED-режим).

4) Текст и читаемость

Основной текст: светло-серый `#E6E8EB` на `#0E1116` (контраст ~12:1).
Вторичный текст: `#A6AEB8`; подсказки — еще на шаг темнее/прозрачнее.
Длинное чтение: слегка теплые оттенки (уменьшают «гало»).
Ссылки — акцент + подчеркивание по умолчанию; цвет ≠ единственный носитель смысла.

5) Поверхности, глубина и стекло

Elevations: `base` → `elev1` → `elev2`; каждый слой светлее/теплее на 2–4%.
Тени — мягкие, широкие, с низкой непрозрачностью; избегать «светящихся» обводок.
Транслуцентные панели (blur) уместны умеренно; обеспечьте контраст текста с подложкой.
Разделители — полутонкие границы `--bd-soft` или едва заметные «хейры».

6) Состояния и фокус

Hover: +2–3% светлее фон; Active: −2–3% (темнее).
Focus: четкое кольцо (например, `outline: 2px solid #6EA0FF; outline-offset: 2px;`), видно и на акцентных кнопках.
Disabled: снижайте контраст аккуратно; не опускайтесь ниже читабельного уровня для текста.

7) Кнопки, формы и таблицы

Primary: фон `--accent`, текст `#0E1116`.
Secondary: фон `--bg-elev1`, бордер `--bd-strong`, текст `--fg-primary`.
Поля ввода: фон `--bg-elev1`, при фокусе — бордер акцентный; placeholder тусклее, но читаем.
Таблицы: зебра-фон едва заметный, выделение строки при hover — +2–3% светлее.

8) Иллюстрации, логотипы и фото

Логотипы и пиктограммы — инверсионные версии на темном; избегайте тонких светлых линий на насыщенных фонах.
Фото: добавляйте темную маску (40–60%) для контрастных заголовков поверх.
Иконки: единая толщина, контур + заполнение — по состоянию, не «ядовитые» цвета.

9) Дата-визуализация в темной теме

Цвета рядов — умеренной насыщенности; минимум 5 различимых тонов.
Сетки и оси — приглушенные (альфа 20–30%), подписи — `--fg-muted`.
Аннотации/инциденты — яркие, но читаемые; подчеркивать формой/маркером, не только цветом.
Пустые данные/лаг — мягкие «туманы», а не белые поля.

10) Производительность и батарея

На OLED действительно экономит чистый черный (#000) — используйте в AMOLED-режиме по опции пользователя.
Избегайте сплошных больших свечений/blur на слабых GPU.
Уважайте `prefers-reduced-motion`: упрощайте анимации/переходы.

11) Поведение и переключение

По умолчанию — следовать `prefers-color-scheme`.
Дайте пользователю явный переключатель (Light / Dark / System), храните выбор (cookie/localStorage).
При смене темы — без вспышек: предварительное добавление класса темы до рендера.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) Доступность (A11y)

Контраст текста ≥ 4.5:1 (обычный), ≥ 3:1 (крупный).
Не кодируйте состояние только цветом: используйте иконку/паттерн/подпись.
Фокус-стили и клавиатурная навигация — обязательно.
VoiceOver/TalkBack: роли, лейблы, очередность таба.

13) Анти-паттерны

Абсолютно белый текст на абсолютно черном фоне на больших площадях — «мерцание» и усталость.
Неоновые акценты на темном — «световой шум».
Тени высокой контрастности («серый на черном» с жесткой границей).
Прозрачный текст на фото без маски.
Исчезающий placeholder (слишком низкая альфа).

14) Примеры компонентов

Кнопка

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

Карточка

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) Тест-план

Освещенность: темная комната / дневной свет / уличный вечер.
Девайсы: OLED и IPS, мобильный/десктоп, разные плотности.
A11y: контраст-чекер, клавиатурный проход, читабельность placeholder’ов.
Восприятие: аб-тест «усталость глаз» и ошибки ввода ночью.
Перфоманс: RUM-метрики (INP/CLS) после включения темной темы; нагрузка GPU (эффекты blur/тени).

16) Метрики качества

Contrast Violations / 1k элементов (цель: → 0).
Complaint Rate на «слишком темно/ярко».
Night Session Completion (поведенческие метрики по сессиям 22:00–06:00).
INP/CLS p75 в Dark Mode vs Light (не хуже базовых).
Opt-in Dark Mode и удержание пользователей, выбравших тему.

17) Чек-лист запуска

• Палитра темной темы с 4–5 уровнями поверхностей
• Контраст текста/иконок/границ соответствует WCAG AA
• Видимые фокус-стили и состояния (hover/active/disabled)
• Логотипы/иконки/фото адаптированы, маски на фото добавлены
• Графики — приглушенные сетки, читабельные подписи, не «ядовитые» ряды
• Переключатель Light/Dark/System, сохранение выбора без «вспышки»
• Уважение `prefers-color-scheme` и `prefers-reduced-motion`
• RUM/перф-дашборд, алерты по регрессиям

18) План внедрения (3 итерации)

Итерация 1 — Фундамент (1–2 недели)

Палитра/токены, базовые поверхности (base/elev1/elev2), текст/границы, кнопки/поля/таблицы, переключатель темы.

Итерация 2 — Детализация (3–4 недели)

Графики и иллюстрации в темном, маски на фото, фокус/состояния, анимации с учетом reduced-motion, перф-аудит.

Итерация 3 — Оптимизация (непрерывно)

AMOLED-режим как опция, тонкая настройка контрастов, юзабилити-тесты ночью, RUM-сравнение Light vs Dark, регулярные бренд/UX-аудиты.

19) Мини-FAQ

Делать ли чисто черный фон?
Для UI — лучше глубокий темно-серый; чистый #000 оставить опцией «AMOLED-режим».

Нужно ли повышать насыщенность акцентов?
В темном — обычно наоборот слегка осветляют и уменьшают насыщенность, чтобы не «светились».

Как быть с изображениями баннеров?
Добавляйте темную подложку/маску, проверяйте контраст текста и логотипа.

Итог

Темная тема — это не инверсия цветов, а отдельный дизайн-режим: продуманная палитра, уровни поверхностей, читаемость, корректные состояния, адаптированные графики и медиа, а также уважение системных настроек. Опирайтесь на токены, контролируйте контраст и перфоманс — и Dark Mode станет удобным, стабильным и красивым инструментом для ночных и дневных пользователей.