Переключение темной-светлой тем


image (199).png





HTML

<button class="btn-toggle">Переключатель тёмной темы</button>
<h1>Привет! Это просто заголовок</h1>
<p>Я просто скучный текст, существующий исключительно ради данной демонстрации.</p>
<p>А я ещё один текст, похожий на тот что выше, потому что два лучше, чем один.</p>
<a href="#">Я ссылка, не нажимайте на меня!</a>
CSS
body {
  color: #222;
  background: #fff;
}
a {
  color: #0033cc;
}

/* Стили Тёмной темы */
body.dark-theme {
  color: #eee;
  background: #121212;
}
body.dark-theme a {
  color: #809fff;
}

JS
// Выбираем кнопку
const btn = document.querySelector(".btn-toggle");
// Отслеживаем щелчок по кнопке
btn.addEventListener("click", function () {
  // Затем переключаем (добавляем/удаляем) класс .dark-theme для body
  document.body.classList.toggle("dark-theme");
});

Более продвинутый вариант, с запоминанием какую тему включал на сайте. Не на всех браузерах/системах работает. Тут


Cookie-файлы
Настройка cookie-файлов
Детальная информация о целях обработки данных и поставщиках, которые мы используем на наших сайтах
Аналитические Cookie-файлы Отключить все
Технические Cookie-файлы
Другие Cookie-файлы
Мы используем файлы Cookie для улучшения работы, персонализации и повышения удобства пользования нашим сайтом. Продолжая посещать сайт, вы соглашаетесь на использование нами файлов Cookie. Подробнее о нашей политике в отношении Cookie.
Подробнее Понятно
Cookies