Облегчить переход на кнопку ночного режима
У меня есть простая кнопка светлого/темного режима JavaScript, но я не знаю, как сделать переход легким и легким. Вот CSS:
.night-mode {
background-color:#2a2d30;
color:white;
transition:0.4s ease-in-out;
}
Вот JS и HTML:
<button onclick = "night()">night mode</button>
<script>
function night() {
var element = document.body;
element.classList.toggle("night-mode");
}
</script>```
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете сделать это, если добавите еще один класс под названием dark-mode-off. Затем установите класс тела на это. В JS добавьте глобальную переменную, чтобы проверить, включен или выключен темный режим. В зависимости от этого замените текущий класс другим.
var darkmodeon = false;
function night() {
var element = document.body;
if (darkmodeon) {
element.classList.replace("night-mode-on", "night-mode-off");
} else {
element.classList.replace("night-mode-off", "night-mode-on");
}
darkmodeon = !darkmodeon;
}.night-mode-on {
background-color: #2a2d30;
color: white;
transition: 0.4s ease-in-out;
}
.night-mode-off {
background-color: #fff;
color: black;
transition: 0.4s ease-in-out;
}<body class = "night-mode-off">
<button onclick = "night()">night mode</button>
</body>Чтобы избежать длинного оператора if, вы можете сделать его одной строкой:
element.classList.replace(darkemodeon ? "night-mode-on" : "night-mode-off", darkemodeon ? "night-mode-off" : "night-mode-on");
Проблема в том, что вы помещаете переход в класс, который вы устанавливаете/удаляете, он должен быть независим от него.
Что бы я сделал, если вы просто меняете элемент body, так это настроить переход в нем как:
body {
transition: color .4s ease-in-out, background-color .4s ease-in-out;
/* set the light colors here if needed */
}
.night-mode {
background-color:#2a2d30;
color:white;
}
Обратите внимание, что в приведенном выше коде я не устанавливаю переход для каждого отдельного свойства, а только для тех, которые мы действительно хотим анимировать.
Естественно, если вы хотите, чтобы анимация работала не только с телом, но и с конкретными элементами (например, некоторые части вашего пользовательского интерфейса должны оставаться неизменными, а также, например, ссылка не наследует цвета), я бы создал служебный класс, например:
.with-colors-transition {
transition: color .4s ease-in-out, background-color .4s ease-in-out;
/* set the light colors here if needed */
}
и примените это ко всем элементам, которые вы хотите добавить/удалить в ночном режиме