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

👋 One last chance before you go!

It takes one minute to join DEV and is worth it for your career.

You get 3x the value by signing in instead of lurking

Get started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay