Как сделать тёмную тему для сайта

Тёмную тему просят всё чаще: вечером она меньше слепит. Но если просто поменять белый на чёрный, получится резко и некрасиво. Вот как сделать аккуратно.

Не берите чистый чёрный

Белый текст на чистом чёрном даёт максимальный контраст 21:1 и на ярком экране «звенит». Удобнее тёмно-серый или тёмно-синий фон (например #121212 или #0f0d17) и не совсем белый текст (#e8e6f0). Контраст всё равно останется выше 4,5:1.

Приглушите яркие цвета

Насыщенный синий или фиолетовый, который хорошо смотрится на белом, на тёмном фоне становится тёмным и плохо читается. Для тёмной темы берите более светлый и менее насыщенный вариант того же оттенка. В записи HSL это значит поднять светлоту (L) и немного снизить насыщенность (S).

Тени и глубина

На тёмном фоне тени почти не видны. Глубину показывают светлотой: чем «выше» карточка, тем светлее её фон. Рамки делайте едва заметными.

Код: системная тема и переключатель

:root { --bg: #ffffff; --text: #15121f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0f0d17; --text: #efedf6; }
}
:root[data-theme="dark"] { --bg: #0f0d17; --text: #efedf6; }
body { background: var(--bg); color: var(--text); }

Без переключателя сайт следует настройке устройства. Кнопка ставит атрибут data-theme на тег html и запоминает выбор в localStorage. Чтобы при загрузке страница не мигала светлой темой, сохранённый выбор нужно применить коротким скриптом в <head>, до стилей. Так сделан переключатель в шапке этого сайта.

Что ещё проверить

• Логотип и иконки: тёмный логотип на тёмном фоне пропадает, нужен светлый вариант.
• Картинки с белым фоном: их можно чуть притемнить или поместить в светлую рамку.
• Поля ввода и списки: добавьте color-scheme: dark, чтобы браузер нарисовал их тёмными.

Тёмные палитры для вдохновения: «Ночной город», «Космос», «Графит».

Частые вопросы

Какой цвет фона выбрать для тёмной темы?

Не чистый чёрный, а тёмно-серый или тёмно-синий, например #121212 или #0f0d17, и не совсем белый текст.

Как сделать тёмную тему на CSS?

Задайте цвета переменными и переопределите их в @media (prefers-color-scheme: dark). Для переключателя добавьте атрибут data-theme на тег html и запоминайте выбор в localStorage.

Почему при загрузке страница мигает светлой темой?

Сохранённый выбор применяется слишком поздно. Применяйте его коротким скриптом в head до подключения стилей.