If you’re trying to add dark mode in WordPress without a plugin, you’re not alone.
Dark mode is now a popular feature across the web, offering better accessibility, reduced eye strain, and a sleek modern look. While plugins like Darkify make this process easier with advanced features, some developers prefer the manual route—no plugins, just CSS.
In this guide, we’ll explore the top 3 ways to add dark mode in WordPress without using a plugin, discuss their pros and cons, and help you choose the right method for your needs.
Why Add Dark Mode Without a Plugin?
There are a few reasons why users go the manual route:
- Want to reduce plugin bloat
- Need more customization and control
- Building a lightweight or static WordPress site
- Learning how CSS and WordPress themes work under the hood
However, with power comes responsibility—you’ll need to write and maintain your own CSS, possibly across theme updates.
Table of Contents
Method 1: Add Dark Mode with Manual CSS in style.css
This method is ideal for custom themes or child themes.
✅ Steps:
- Go to your WordPress admin panel.
- Navigate to Appearance > Theme File Editor.
- Open the
style.cssfile (preferably in a child theme). - Add the following CSS at the bottom:
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
.dark-mode a {
color: #bb86fc;
}- Use a toggle button (via HTML/JS) to add or remove the
dark-modeclass.
Pros & Cons:
Pros:
- Complete control
- No plugins needed
Cons:
- Requires JavaScript knowledge for toggle
- No admin dashboard support
Method 2: Use CSS Variables for Light/Dark Toggle
This is a modern and scalable approach.
✅ Sample CSS:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
body.dark-mode {
--bg-color: #121212;
--text-color: #ffffff;
}Then you can toggle dark-mode on the <body> via a script or a checkbox toggle.
⚖️ Pros & Cons:
Pros:
- Reusable and clean
- Easily maintainable
Cons:
- Needs basic JS for toggling
Method 3: Auto Dark Mode Based on System Preferences
This method uses @media (prefers-color-scheme) to automatically detect system settings.
✅ Sample CSS:
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
}
Pros & Cons:
Pros:
- Seamless for users
- No toggle/button needed
Cons:
- No user override
- Can’t preview unless system theme is changed
Comparing All 3 CSS Methods
| Method | User Toggle | Plugin-Free | Ease of Setup |
|---|---|---|---|
Manual style.css | ✅ | ✅ | ⭐⭐ |
| CSS Variables | ✅ | ✅ | ⭐⭐⭐ |
prefers-color-scheme | ❌ | ✅ | ⭐⭐⭐⭐ |
Why We Still Recommend Plugins Like Darkify
While manual CSS methods are useful, they lack:
- Toggle buttons
- Dashboard integration
- Theme compatibility handling
- WooCommerce or Elementor support
hat’s why tools like Darkify Plugin exist—to do it all with 1-click setup. Try it here
External Resources
Final Thoughts
If you’re building a lean site or love tinkering with code, learning how to add dark mode in WordPress without a plugin is a great skill.
But if you want speed, stability, and deep integration—Darkify Plugin saves you hours of development and works with virtually every theme out of the box.
Can I really add dark mode in WordPress without a plugin?
Yes! You can add dark mode in WordPress without a plugin using simple CSS techniques like adding a dark-mode class, using CSS variables, or leveraging @media (prefers-color-scheme). However, managing toggles, exclusions, and device detection manually can be complex without tools like Darkify.
Is it better to use a plugin instead of custom CSS?
It depends on your skill level. While CSS gives you full control, plugins like Darkify – WordPress Dark Mode Plugin make it easier, faster, and more reliable—especially for beginners or busy developers.
Will this CSS dark mode work on mobile devices?
Yes, the manual methods to add dark mode in WordPress without a plugin work on mobile devices, especially the @media (prefers-color-scheme) option. For more control (like toggles or page exclusions), a plugin is recommended.
How do I add a toggle switch to manually activate dark mode?
To add a toggle switch, you’ll need a bit of JavaScript to add or remove a dark-mode class from the <body>. Or, use a plugin like Darkify that provides built-in toggle UI and switcher placements.
Will my theme (like Neve or Astra) support manual dark mode CSS?
Yes, popular themes like Neve, Astra, and Blocksy are compatible with custom CSS. Just be careful when updating themes—they might override your manual changes unless you’re using a child theme.
Leave a Reply