Тёмная тема и темизация с помощью переменных 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. Стиль печати оставляйте светлым. Никогда не используйте цвет как единственный носитель информации (добавляйте узор/текст). Документируйте токены в небольшом руководстве по стилю.

См. также: Доступные сайты