You want to add dark mode to your website? Good news, it’s way easier than you think. I’m going to show you how to make your site automatically switch between light and dark themes based on what your visitors prefer. And we’re doing it without writing a single line of JavaScript.
Original article published here
Make sure you score my design creativity in comments out of 10.
Before you go any further, here is the complete code example for you:
Here’s What We’re Building
You know how your phone switches to dark mode at night? We’re making your website do the same thing. When someone visits your site, it’ll automatically match their system settings.
If they use dark mode on their phone, they’ll see your site in dark mode. If they prefer light mode, that’s what they get. No buttons, no switches, it just works.
The Magic Behind It
There’s this CSS feature called prefers-color-scheme that checks what theme people have on their device. It's built into all modern browsers, and it's incredibly simple to use.
Here’s the basic idea:
:root { --bg: #fafafa; --text: #0a0a0a;}
@media (prefers-color-scheme: dark) { :root { --bg: #0a0a0a; --text: #fafafa; }}
body { background: var(--bg); color: var(--text); transition: background-color 0.3s ease;}
What’s happening here? We’re setting up color variables. In light mode, the background is light and text is dark. When dark mode kicks in, we flip them around.
Why Should You Use Variables?
Those --bg and --text things are CSS variables. They're like containers that hold your colors.
The cool part? You define them once, use them everywhere, and when the theme changes, everything updates automatically. You don’t have to go through your entire stylesheet, changing colors one by one.
Let’s Test It
Want to see if it works? Try this:
If you’re on a Mac, go to System Preferences and change your appearance setting. On Windows, check your color settings in personalization. Your website should switch instantly.
Auto Dark Mode Based on System Settings:
Auto Light Mode Based on System Settings:
You can also test it in Chrome DevTools. Press Cmd+Shift+C, type “dark mode,” and you’ll see an option to emulate different color schemes.
A Few Things I’ve Learned
After building this for a bunch of projects, here’s what I’d tell you:
Don’t use pure black backgrounds. Something like #0a0a0a looks way better than #000000. Pure black can actually be harder to read on some screens.
Add that transition property. When colors change, you want it to be smooth, not jarring. That little 0.3s ease makes a huge difference.
Test both modes properly. Sometimes colors that look great in light mode completely fail in dark mode. Check everything before you ship it.
Why Not Just Add a Toggle?
You might be thinking: “Why not just add a button, so people can switch manually?”
You could, but you need to think about it, if someone already chose dark mode on their entire operating system, they want dark mode everywhere. Why make them click another button?
This approach respects their choice automatically. Plus, it’s faster (no JavaScript), simpler (less code), and just works. Can’t really beat that.
What You Need to Do
Honestly, that’s pretty much it. Take the code above, swap in your own colors, and you’re done.
Make sure you define variables for everything backgrounds, text, borders, whatever you’re using in your project. Then set up the dark mode alternatives in that media query.
The browser handles the rest.
Final Thoughts
I love this feature because it’s one of those things that makes your site feel polished without requiring much work.
Your visitors probably won’t consciously notice it. They’ll just feel like your site “gets” them. And that’s the point of good design, right?
Give it a shot, your future 2 AM visitors will appreciate it.
Quick Reference:
- Set up light colors in
:root - Add dark colors in
@media (prefers-color-scheme: dark) - Use
var()to apply them - Add smooth transitions
- Test it on real devices
That’s all there is to it. Now go build something cool.
— — — — — — — — — — — — — — — — — — — — — — —
Did you learn something good today?
Then show some love. 🫰
© Muhammad Usman
WordPress Developer | Website Strategist | SEO Specialist
Don’t forget to subscribe to Developer’s Journey to show your support.
Top comments (0)