Темная тема для сайта

Включение поддержки color-scheme

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

Для определения цветовой схемы сайта используется метатег color-scheme:

Также поддержку цветовых схем можно указать в CSS:

:root {
  color-scheme: light dark; /* Поддержка обеих тем */
}

Варианты значений атрибута content:

1. normal — используется цветовая палитра по умолчанию;
2. only light — только светлый режим;
3. (1) light, (2) dark, (3) light dark, (4) dark light — соответственно, (1) только светлая, (2) только темная, (3) оба варианта, но светлая предпочтительна, (4) оба варианта, но темная предпочтительна.

Подключение палитры

Допустим, Вы включили поддержку и светлой и темной темы. Теперь Вам нужно подключить стили, соответствующие активной цветовой схеме устройства или браузера. Это делается через CSS media prefers-color-scheme. Возможные значения:

1. no-preference — пользователь не сделал никаких предпочтений;
2. light — активна светлая тема;
3. dark — темная, соответственно.

Например, можно задать палитру на уровне :root:

@media (prefers-color-scheme: light),
       (prefers-color-scheme: no-preference) {
  :root {
    --title-color: #000;
    --text-color: #333;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --title-color: #fff;
    --text-color: #ccc;
  }
}