How can I fade in a class when I add it with Javascript?-CodePudding

So, I have this code for my "site":

(this is a codepen link) https://cutt.ly/kGFj7qi

When I press the dark mode button, it just switches to dark mode. What I would like to do is make it so that it fades to dark mode. If needed, I can use jQuery. Is there any way to do this without interfering with the other code? Any help is appreciated.

CodePudding user response：

Since you are adding and removing classes, you can ask the browser to handle the transition for you. I tested this in your pend and it seemed to work but you may want to mess around a bit.

* {
  transition: all 0.25s ease-in-out;
}

where we tell the browser to have some sort of transition between all states that it can. Some states don't allow for transition but colors should.