Тёмная тема

Многие включают в системе тёмную тему: так меньше устают глаза вечером, а на телефоне экономится заряд. Сайт может подстроиться под этот выбор. Основа тёмной темы — хранить цвета в переменных и менять их значения в одном месте.

Медиазапрос prefers-color-scheme

Медиазапрос prefers-color-scheme сообщает, какую тему выбрал пользователь в системе: light или dark:

<style>
  .box { padding: 16px; background: white; color: black; border: 1px solid silver; }
 
  @media (prefers-color-scheme: dark) {
    .box { background: #1e1e24; color: #eee; }
  }
</style>
 
<div class="box">Цвет блока зависит от темы системы</div>

Пример следует теме вашей операционной системы, а не переключателю на этом сайте. Чтобы увидеть тёмный вариант, включите тёмную тему в системе или эмулируйте её в инструментах разработчика (в Chrome — панель Rendering, пункт «Emulate CSS prefers-color-scheme»).

Цвета в переменных

Если цвета разбросаны по всем правилам, для тёмной темы придётся переписать каждое. Удобнее объявить переменные — пользовательские свойства — и в медиазапросе менять только их:

<style>
  .page {
    --bg: white;
    --text: #222;
    --accent: steelblue;
    padding: 16px;
    background: var(--bg);
    color: var(--text);
  }
  .page a { color: var(--accent); }
 
  @media (prefers-color-scheme: dark) {
    .page { --bg: #1e1e24; --text: #eee; --accent: lightskyblue; }
  }
</style>
 
<div class="page">Текст и <a href="#">ссылка</a> берут цвета из переменных.</div>

Обычно переменные задают на :root — корне всей страницы.

Свойство color-scheme

Браузер сам рисует полосы прокрутки, поля ввода и кнопки. Свойство color-scheme сообщает ему, какие темы поддерживает страница, и встроенные элементы тоже темнеют:

:root {
  color-scheme: light dark;
}

С этой строкой в тёмной системе фон страницы по умолчанию станет тёмным, текст — светлым, а поля формы — тёмными.

Функция light-dark()

Функция light-dark() принимает два цвета: для светлой и для тёмной темы. Она работает, только если задан color-scheme, и избавляет от отдельного медиазапроса:

:root {
  color-scheme: light dark;
  --bg: light-dark(white, #1e1e24);
  --text: light-dark(#222, #eee);
}

Функция появилась во всех основных браузерах в 2024 году.

Переключатель на сайте

Часто тему дают выбрать прямо на сайте. Тогда тёмные цвета включаются классом или, как здесь, состоянием флажка через :has(). Отметьте флажок:

<style>
  .site { --bg: white; --text: #222; padding: 16px; background: var(--bg); color: var(--text); transition: background 0.3s; }
  .site:has(#dark:checked) { --bg: #1e1e24; --text: #eee; }
</style>
 
<div class="site">
  <label><input type="checkbox" id="dark"> Тёмная тема</label>
  <p>Анна читает статью вечером.</p>
</div>

Настоящие сайты запоминают выбор с помощью JavaScript и ставят класс dark на элемент <html>.

Частая ошибка

Цвет, заданный в обход переменных, в тёмной теме не меняется. Получается тёмный текст на тёмном фоне:

<style>
  .site { --bg: #1e1e24; --text: #eee; padding: 16px; background: var(--bg); color: var(--text); }
  .price { color: #333; }
</style>
 
<div class="site">
  <p>Обычный текст виден.</p>
  <p class="price">Цена: 20 €, почти не видна</p>
</div>

Все цвета компонента берите из переменных, а после включения тёмной темы пройдитесь по страницам и проверьте каждую.