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 стане зручним, стабільним і красивим інструментом для нічних і денних користувачів.