Темна тема й темізація за допомогою змінних CSS

Коротко: Зі змінними CSS для кольорів, медіазапитом prefers-color-scheme і перемикачем можна побудувати чисту темну тему, що поважає системне налаштування та зберігає вибір.

Докладніше: Добра темна тема — більше, ніж інверсія кольорів: достатній контраст, приглушені поверхні, адаптовані тіні й зображення. З токенами дизайну (іменованими змінними кольору) усе лишається придатним до супроводу.

Подробиці

Змінні як токени дизайну

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #5c6370;
  --accent: #0b6bcb;
  --border: #d9dde3;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12141a; --text: #e8eaf0; --muted: #9aa3b2;
    --accent: #6ea8ff; --border: #2a2f3a;
  }
}
:root[data-theme="dark"] { --bg: #12141a; --text: #e8eaf0; /* … */ }
body { background: var(--bg); color: var(--text); }

Використовуйте семантичні імена (--bg, --text, --accent), а не --blue. color-scheme: light dark відповідно забарвлює елементи форм, смуги прокручування. Нове: функція light-dark() і @property.

Система, перемикач, збереження

• Слідуйте системі через prefers-color-scheme (за замовчуванням).
• Перемикач світла / темна / система: задає data-theme на <html>; запам’ятовуйте вибір у localStorage (у try/catch).
• Уникайте мерехтіння (FOUC): невеликий вбудований скрипт у <head>, що задає уподобання до першого відображення.
• У Next.js: бібліотека на кшталт next-themes або власний провайдер; стежте за розбіжностями гідратації (suppressHydrationWarning на html).
• Додайте <meta name="theme-color"> для панелі браузера.

Дизайн у темряві

• Перевіряйте контраст за WCAG (текст ≥ 4,5:1), не суто чорний/білий (#000/#fff сліпить): краще #12141a і #e8eaf0.
• Освітлюйте акцентні кольори і знижуйте насиченість.
• Піднесення через світліші поверхні замість тіней.
• Зображення/логотипи: темні варіанти, filter/mix-blend-mode, SVG з currentColor.
• Діаграми та підсвітка коду з власними палітрами.
• Перевіряйте прозорі PNG на темному.
• Ретро-/ігрові стилі — окремі теми: та сама структура змінних, інші значення.

Тестування та доступність

У DevTools Rendering → емуляція prefers-color-scheme; перевіряйте на реальних пристроях (OLED, сонячне світло). Кільця фокуса й кольори помилок мають бути видимі в обох режимах. Враховуйте також forced-colors/високий контраст (@media (forced-colors: active)) і prefers-contrast. Стиль друку залишайте світлим. Ніколи не використовуйте колір як єдиний носій інформації (додавайте візерунок/текст). Документуйте токени в невеликому посібнику зі стилю.

Див. також: Доступні сайти