DEV Community

Andrew McSillyone
Andrew McSillyone

Posted on

How to make a smooth Dark/Light mode transformation

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Meme ChatGPT

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay