Блог

Главная - Вопросы по программированию - упрощение перехода по кнопке ночного режима

упрощение перехода по кнопке ночного режима

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть простая кнопка JavaScript light / dark mode, но я не знаю, как облегчить переход как из, так и из. Вот 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>```

Ответ №1:

Проблема в том, что вы помещаете переход в класс, который вы устанавливаете / удаляете, он должен быть независимым от него.

Что бы я сделал, если вы просто меняете элемент 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 */
   }

и примените это ко всем элементам, которые вы хотите добавить / удалить в ночном режиме

Ответ №2:

Вы можете сделать это, если добавите другой вызываемый класс dark-mode-off . Затем установите для класса body это значение. В JS добавьте глобальную переменную, чтобы проверить, включен или выключен darkmode. В зависимости от этого замените текущий класс другим.

 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");