Смена светлой и темной тем сайта на CSS

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

Давайте посмотрим, как вы можете сделать это на вашем сайте.

Автоматическое переключение

Начнем с ситуации, когда сайт автоматически будет менять тему в зависимости от настроек компьютера (телефона/планшета).

Стили для светлой темы

:root {
  --var-bgcolor: #fff;
  --var-fontcolor: #000;
}

body {
  background-color: var(--var-bgcolor);
  color: var(--var-fontcolor);
}

Для автоматической смены светлой темы на темную, воспользуемся css-медиафункций prefers-color-scheme, в которой заменим цвета в переменной:

:root {
  --var-bgcolor: #fff;
  --var-fontcolor: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --var-bgcolor: #333;
    --var-fontcolor: #eee;
  }
}

body {
  background-color: var(--var-bgcolor);
  color: var(--var-fontcolor);
}

Теперь, каждый раз, когда на устройстве будет меняться цветовая схема, на сайте она также будет изменяться.

Переключение вручную

Для ручного переключения темы необходимо добавить на сайт чекбокс, при активации которого будет включаться темная дема, а при деактивации - светлая. При нажатии на этот чекбокс будет срабатывать javascript-функция changeTheme. В случае если чекбокс активирован, то функция будет добавлять к body новый аттрибут dark. В противном случае этот аттрибут будет удаляться.

<label>
  <input type="checkbox" onchange="changeTheme(this.checked)">
  Включить темную тему
</label>
<script>
  function changeTheme(isChecked) {
    if (isChecked) {
      document.body.setAttribute('dark', '');
    } else {
      document.body.removeAttribute('dark');
    }
  }
</script>

Теперь немного изменим css, и сделаем смену значений переменных при наличии аттрибута dark:

:root {
  --var-bgcolor: #fff;
  --var-fontcolor: #000;
}

[dark] {
  --var-bgcolor: #333;
  --var-fontcolor: #eee;
}

body {
  background-color: var(--var-bgcolor);
  color: var(--var-fontcolor);
}

Как это работает смотрите в видео: