Smooth transition between classes, colours | .classList.toggle, JavaScript

As a beginner in JS, I am practicing a very simple operation: switching between dark and light themes.

Everything works well, but I want to have a smooth transition between classes, but I don’t know how to do it.

To be exact, I want a smooth transition between colours.

Please, help =)

Here is my js code:

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

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

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