Why You Need Dark Mode (It’s Not Just a Trend)
Hey there, web developer! Ever been scrolling through a website late at night and suddenly get hit with a blinding white screen? 😫 It’s not just annoying; it can actually cause eye strain. That’s why CSS dark mode isn’t just a cool feature anymore—it’s a crucial part of modern web design.
Think about it like this: your users are in control. They might be in a dark room, trying to save battery on their OLED screen, or they might simply prefer the aesthetic. By implementing a simple dark mode, you’re making your site more accessible, user-friendly, and frankly, more professional.
But what if I told you that adding dark mode doesn’t require complex JavaScript libraries or a major redesign? The simplest, most effective way to do it is with just a few lines of CSS, thanks to some powerful, built-in browser features. Let’s dive into how it all works.
Table of Contents
The Magic Behind CSS Dark Mode: Media Queries & CSS Variables
The secret sauce for a simple CSS dark mode lies in two key ingredients: media queries and CSS variables (also known as custom properties).
- Media Queries: These are like little detectives for your user’s browser. They can check all sorts of things, like the screen size, orientation, and most importantly for us, the user’s preferred color scheme. The specific query we’ll use is
prefers-color-scheme. It can be set to eitherlightordark. The browser does all the work for you by telling your website which theme the user has selected in their operating system’s settings. - CSS Variables: Imagine a variable as a custom name you give to a value you want to reuse across your stylesheet. Instead of typing
#FFFFFF(white) every single time you need a background color, you can just define a variable like--body-bg: #FFFFFF;. This makes updating colors super easy. To change your site’s entire color palette, you only need to update the variable’s value in one place.
By combining these two, we can create a system where our CSS variables hold the colors for both light and dark modes. The media query then acts as a switch, telling the browser to use the dark-mode color values when the user has prefers-color-scheme: dark. It’s like magic! ✨
Step-by-Step Tutorial: Building Your Own Simple Dark Mode
Let’s get our hands dirty and build this thing. I promise it’s way easier than it sounds.
Step 1: Define Your CSS Variables
First, we need to create our color variables. We’ll define them inside the :root pseudo-class. The :root selector targets the highest-level element in the document (the <html> tag), which makes these variables globally accessible.
Here’s a good way to start. We’ll set up our default (light mode) colors first:
CSS
:root {
/* -- Define your light mode colors here -- */
--bg-color: #FFFFFF;
--text-color: #333333;
--link-color: #007bff;
--header-bg: #f8f9fa;
--border-color: #e9ecef;
}
Step 2: Apply the Variables to Your Elements
Now, let’s replace all the static color codes in our CSS with these new variables. This is where the real power comes in. For example, if you have a body and h1 selector, you’d change them to this:
CSS
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: Arial, sans-serif;
}
h1 {
color: var(--text-color);
border-bottom: 2px solid var(--border-color);
padding-bottom: 10px;
}
Notice how we’re using the var() function to call our variables. This makes our code clean and easy to maintain.
Step 3: Add the Dark Mode Media Query
This is the final, and most crucial, step. We’ll create a new block of CSS that only runs when the user’s OS is set to dark mode. Inside this block, we’ll redefine our variables with the new dark-mode colors.
CSS
@media (prefers-color-scheme: dark) {
:root {
/* -- Redefine variables for dark mode -- */
--bg-color: #121212;
--text-color: #F8F8F8;
--link-color: #BB86FC;
--header-bg: #1e1e1e;
--border-color: #383838;
}
}
And that’s it! 🎉 With just these few steps, your website now has a fully functional CSS dark mode that automatically switches based on the user’s system settings.
Adding a User Toggle for Ultimate Control
What if a user wants to manually switch between modes, regardless of their system settings? We can achieve this with a tiny bit of JavaScript and a special CSS class.
Create a Class: Let’s create a class called .dark-mode in our CSS. This class will have the exact same variable definitions as our media query.
CSS
.dark-mode
{
--bg-color: #121212;
--text-color: #F8F8F8;
--link-color: #BB86FC;
--header-bg: #1e1e1e;
--border-color: #383838;
}Add a Toggle Button: In your HTML, add a simple button.
HTML
<button id="mode-toggle">Toggle Dark Mode</button>The JavaScript Magic: Now, we’ll use a few lines of JavaScript to listen for a click on that button. When the button is clicked, we’ll add or remove the .dark-mode class from the <body> element.
JavaScript
const toggleButton = document.getElementById('mode-toggle');
const body = document.body;
toggleButton.addEventListener('click', () => {
body.classList.toggle('dark-mode');
});This simple script adds or removes the class, which in turn applies or removes our dark-mode variables, giving users the power to choose.
Troubleshooting & Best Practices
- Colors Don’t Change? Make sure you’ve used
var(--variable-name)everywhere you need a color. If you’ve left any hard-coded values like#333, they won’t change. - Too Much Contrast? Don’t use pure black (
#000000) or pure white (#FFFFFF). Slightly off-black or off-white colors are much easier on the eyes. - Check Your Link Colors: Ensure your link colors are easily readable in both light and dark modes. The standard blue link color might be hard to see on a dark background.
- Remember to Test: Test your site in both modes on different browsers and devices to make sure everything looks right. This is a critical step in any web development project.For more advanced tips on CSS variables and web accessibility, check out this great article from CSS-Tricks on using prefers-color-scheme to create a theme switcher.
Conclusion & Your Next Steps
Implementing a simple CSS dark mode is one of the easiest ways to improve your website’s user experience in 2025. It’s a small change that makes a huge impact, showing your users you care about their comfort and preferences.
Ready to take on your next web development challenge? Head over to webdevservices.in for more beginner-friendly tutorials and resources.
Did you find this guide helpful? Let me know in the comments if you’ve tried adding dark mode to your own site!
Bro, I was literally struggling with prefers-color-scheme. Your explanation made it crystal clear. Respect! 🙏
Thank you so much for all your support 🙏
Clear, concise, and practical. This is going straight into my bookmarks for future projects.
Thank you so much for all your support 🙏
Loved the troubleshooting section! Especially the tip about not using pure black/white, that’s something I always overlooked.
Thank you so much for all your support 🙏
Just implemented this in my blog. Bro, even my non-tech friends noticed the difference. Dark mode FTW 🔥
Thank you so much for all your support 🙏
I used to rely on plugins for WordPress, but this pure CSS approach feels so much cleaner. Great job!
Thank you so much for all your support 🙏
One of the rare tutorials where I didn’t have to fix broken code. Copied, pasted, and it worked in first go 👌.
Thank you so much for all your support 🙏
This is gold! I always thought dark mode needed heavy JS, but your CSS-only solution worked like a charm on my portfolio site. Thanks Pawan ji 🙌
Thank you so much for all your support
Quick question: does this method also work inside React apps where styles are scoped? Or should I define variables globally?
Yes, it works perfectly fine in React apps too!
CSS variables (–bg-color, –text-color, etc.) live in the CSS cascade, so as long as you define them in a global scope like :root (or html/body), they’ll be available throughout your app—even if your components use scoped CSS or CSS Modules.
🔹 Option 1 (Best Practice): Define your light/dark variables globally in :root. Then use them inside component styles with var(–bg-color) etc. This way, all components inherit the same theme values.
🔹 Option 2: If you want a component-specific theme, you can declare variables at a more local scope (like on a parent
For most React projects, defining them globally in :root (and toggling a .dark-mode class on body or html) is the cleanest and most scalable approach.
I added the toggle button on my photography blog and my readers love it! Super easy to follow tutorial.
Thank you so much for all your support 🙏
Dark mode with CSS variables is such a neat trick. I’ve implemented it for my client’s SaaS dashboard—works perfectly.
Thank you so much for all your support 🙏