Как сделать переключатель тёмной темы кнопкой? База для новичка

Задан 11 месяцев назад1.4к просмотров2 ответа

Хочу кнопку «тёмная тема»: нажал — фон тёмный, нажал ещё — снова светлый. Видел, что делают через класс на <body>, но не пойму, как переключать. Можно простой пример?

Снежана Фролова 🥚 Яйцо

спросил 11 месяцев назад

2 ответа

✓ Принятый ответ — помог автору

Самый чистый способ — описать тёмную тему классом в CSS и переключать этот класс на <body> через JS.

CSS:

body.dark {
  background: #1e1e1e;
  color: #eee;
}

HTML + JS:

<button id="theme">Сменить тему</button>

document.getElementById('theme').addEventListener('click', function() {
  document.body.classList.toggle('dark');
});

classList.toggle('dark') сам добавляет класс, если его нет, и убирает, если есть. CSS делает остальное: когда у body есть класс dark, применяются тёмные стили. Один обработчик — и переключатель готов.

Максим Герасимов 🐣 Птенец

10 месяцев назад

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

// при клике
const isDark = document.body.classList.toggle('dark');
localStorage.setItem('dark', isDark);

// при загрузке страницы
if (localStorage.getItem('dark') === 'true') {
  document.body.classList.add('dark');
}

Тогда сайт запомнит, что пользователь выбрал тёмную тему. Но для начала хватит и простого toggle.

Данил Григорьев 🐣 Птенец

10 месяцев назад

Ваш ответ

Войдите, чтобы ответить на вопрос.