Переключение темной-светлой тем
HTML
<button class="btn-toggle">Переключатель тёмной темы</button> <h1>Привет! Это просто заголовок</h1> <p>Я просто скучный текст, существующий исключительно ради данной демонстрации.</p> <p>А я ещё один текст, похожий на тот что выше, потому что два лучше, чем один.</p> <a href="#">Я ссылка, не нажимайте на меня!</a> |
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");
});
|
Более продвинутый вариант, с запоминанием какую тему включал на сайте. Не на всех браузерах/системах работает. Тут