Okay. So you're on a website, but the default is dark mode. However, you like light mode (if you like light mode, then there is something wrong with you 😆). It is 3 AM. You go to the dark/light switch and click the toggle. Suddenly a blinding light flashes before you in the dark room, causing you to go temporarily blind. You hear ringing in your ears and have a seizure. You need to go to the hospital because of it, costing you thousands of dollars because you live in the U.S and you don't have insurance (if you don't live in the U.S, good for you).
That was a dramatization. But it is very annoying when you have to switch themes and you get blinded. I'm here to fix that! Using the latest and greatest CSS technology (not really), I have a super simple way to fix this. A smooth transition! As usual, I will give you the code and I will explain what is happening.
But first, let's actually make a theme switcher. See This Link for how to make a theme switch.
If you already have a theme switch, the only compatible ways with this method are variables (--color:blue;) and the strange method W3 Schools uses here.
Da code:
*{
transition-duration: 1s;
}
The duration time can be changed to your likings. I just used one second for the sake of this tutorial.
Okay, what's happening?
An asterisk, in case you didn't know, is the root selector. This means that every element is affected by this. By changing the transition-duration, the computer knows that when something, anything is changed, it will apply this transition. Simple, right?
Thanks for reading!
Andrew McSillyone
Top comments (0)