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

Разберем как сделать простенький переключатель темы со светлой на темную и обратно. Он состоит из трех деталей: двух скриптов и стилей.

Для тех, кому сразу хочется посмотреть как это функционирует, вот рабочий пример

Первый скрипт совсем коротенький и его хорошо бы размещать в секции head:

  
<script>
  const theme = localStorage.getItem('color-theme') === 'dark' ? 'dark' : 'light';
  document.documentElement.setAttribute('data-color-theme', theme);
</script>
  

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

На следующем этапе напишем основной скрипт:

document.querySelectorAll('.theme-toggle').forEach(item => {
  item.addEventListener('click', () => {
    const theme = document.documentElement.getAttribute('data-color-theme') === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-color-theme', theme);
    localStorage.setItem('color-theme', theme);
  });
});
  

В этом скрипте для html добавляется атрибут со значением выбранной темы: data-color-theme="dark". Если по какой-то причине вам не нравится работать с data-атрибутами, вы можете изменить на класс и внести соответствующие коррективы в селекторы. Осталось сделать стили. В этом лучше всего помогут кастомные свойства.

:root {
  --color-body-bg: white;
  --color-text: #333;
}

[data-color-theme="dark"] {
  --color-body-bg: #333;
  --color-text: #FFFFE0;
}

body {
  background: var(--color-body-bg);
  color: var(--color-text);
}