Плавный переход между классами, цветами | .classList.toggle, JavaScript

Question

Как новичок в JS, я практикую очень простую операцию: переключение между темными и светлыми темами.

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

Точнее, я хочу плавного перехода между цветами .

Пожалуйста, помогите =)

Вот мой js код:

let themer = document.querySelector('.page');

let themeButton = document.querySelector('.theme-button');

themeButton.onclick = function () {
  themer.classList.toggle('light-theme');
  themer.classList.toggle('dark-theme');
};

Answer 1

Добавьте правило перехода, где свойство изменяется. например:

transition: background-color 2s ease;