Как сделать рабочим переключатель в скрипте смены темы?

Question

[Алексей Королёв]

Есть скрипт для смены темы

if (!localStorage.theme) localStorage.theme = "light"
document.body.className = localStorage.theme


toggleThemeBtn.onclick = () => {
    document.body.classList.toggle("dark")
      localStorage.theme = document.body.className || "light"
}

Как его интегрировать с переключателем бутстрап?

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

Answer 1

[Владимир]

У вас в скрипте при нажатии на кнопку устанавливается на body класс dark или снимается.
У вас на форме чекбокс, соответственно вам нужно на он ченж проверять включен чекбокс или нет, и ставить этот класс или нет. Сама логика переключения вам не пригодится.

Comments

[FrelFrloich]

Дополню слегонца, Владимир имеет ввиду

.dark input{
   color: red;
}

.light input{
   color: blue;
}

в стилях в общем.

[Владимир]

FrelFrloich, Этот код (код который привел автор) работает только с одним стилем
Или все ка есть или обернуто в .dark

[FrelFrloich]

Владимир, я как пример, может человек дневной вариант решит сделать, мало ли, да и беды особой не будет если он обвернёт всё в лайт и дарк, а не просто в то или другое.

А ну хотя, вы правы, если он не использует прероцессор он помрёт это делать.

[Алексей Дубровин]

FrelFrloich
Препроцессоры причём?
Правильная архитектура ?
Пример который вы превели выше, это пример неправильной архитектуры. Препроцессор её не решает.
Копирую для уточнения.

dark input{
   color: red;
}

.light input{
   color: blue;
}

[FrelFrloich]

Алексей Дубровин, Владимир говорил об этом

.dark input{
   color: red;
}

.input{
   color: blue;
}

Сань, ну не тебе про архитектуру говорить, извини что так прямо.

[Алексей Дубровин]

FrelFrloich,

ну не тебе про архитектуру говорить

Для того чтобы выбирать правильные решения, нужно быть богом??
Я как будто с ребёнком говорю.
Есть явно плохие решения, есть явно хорошие.
Если мне нужно 10 тем мой код разрастется в 10 раз. Наверное нужно преисполнится чтобы понять, что что-то не так.