Переключение темной-светлой тем
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"); }); |
Более продвинутый вариант, с запоминанием какую тему включал на сайте. Не на всех браузерах/системах работает. Тут