About WordPress Dark Mode Without Plugin
You’ve probably been overburdening your eyes by spending a lot of time in front of the screen. So it’s important you pacify them while using computers. One of the most effective ways to give your eyes a break is by changing the screen’s display setting to dark mode.
Website owners should and can incorporate a dark mode into their sites to improve the visual experience. If you use WordPress for your website, adding dark mode should be a breeze. You can do it either manually or by installing a plugin.
We agree that the plugin is the best solution to create a dark version for your WordPress website. But we also have answers for those who think it’s impossible to enable WordPress dark mode without a plugin! Yeah, it’s possible.
Here, we’ll talk about adding a dark mode with and without using a plugin. And also discuss which one excels where. Later in the article, you’ll also get to know one of our favorite plugins, called QS Dark Mode.
So stay tuned!
Benefits of using Dark Mode in WordPress
Why should you be using Dark Mode in WordPress? There are some good reasons behind it. You personally realize its need while browsing on your PC at night with tired eyes.
Being a website owner, you can bring many benefits to the users by adding this mode to your website. And it should also add value to your business.
There’s more to its benefits; let’s find out some of these below.
- Minimizes white light coming from the computer screen significantly
- Reduces eye strain
- It saves energy and increases battery life
- Increases Time on the Page by improving user experience
- Provides an aesthetical aura
So yeah, these are pretty much the reasons why Dark Mode is a great option for your WordPress site.
WordPress Dark Mode Without Plugin – Is It Possible?
Now comes the fun part. Here we’ll see how you can turn off the lights for your WordPress site without installing any plugins.
There are two ways you can do this —
- Adding dark mode by using HTML, CSS, and JQuery
- Using ready-made themes with dark mode enabled
Let’s take a look at both these methods in detail below.
1) Add dark mode by using HTML, CSS, and JQuery
If you’re a theme developer, you should prefer this manual method to include a dark mode toggle on your WordPress site. In this method, you need to go through a little bit of coding related to HTML, CSS, and JQuery.
Don’t worry if you find coding difficult because you can get readily available code snippets here. So you can just copy and paste them in the appropriate place to enable the dark mode.
Don’t hesitate to use these snippets, as they are open-source and free to use, but do make sure that they are from reputable sources.
- Add the HTML Code Snippet
First, add the HTML snippet to create a dark mode toggle button. All you need to do is copy and paste the following snippet into the header or footer of your theme.
<div class=”wpnm-button”>
<div class=”wpnm-button-inner-left”></div>
<div class=”wpnm-button-inner”></div>
</div>
- Style with CSS
Now you’ve to style your dark mode button or switcher with the following CSS snippet.
/* Dark mode switcher */
.wpnm-button {
font-size: 16px
}
.wpnm-button-inner-left:empty {
margin-left: -0.625em
}
.wpnm-button-inner-left:before, .wpnm-button-inner-left:after {
box-sizing: border-box;
margin: 0;
padding: 0;
/*transition*/
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
outline: none
}
.wpnm-button .wpnm-button-inner, .wpnm-button .wpnm-button-inner-left {
display: inline-block;
font-size: 0.875em;
position: relative;
padding: 0em;
line-height: 1em;
cursor: pointer;
color: rgba(149, 149, 149, 0.51);
font-weight: normal
}
.wpnm-button .wpnm-button-inner-left:before {
content: ”;
display: block;
position: absolute;
z-index: 1;
line-height: 2.125em;
text-indent: 2.5em;
height: 1em;
width: 1em;
margin: 0.25em;
/*border-radius*/
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
right: 1.625em;
bottom: 0em;
background: #FFB200;
transform: rotate(-45deg);
box-shadow: 0 0 0.625em white
}
.wpnm-button .wpnm-button-inner-left:after {
content: “”;
display: inline-block;
width: 2.5em;
height: 1.5em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
background: rgba(255, 255, 255, 0.15);
vertical-align: middle;
margin: 0 0.625em;
border: 0.125em solid #FFB200
}
.wpnm-button.active .wpnm-button-inner-left:before {
right: 1.0625em;
box-shadow: 0.3125em 0.3125em 0 0 #eee;
background: transparent
}
.wpnm-button.active .wpnm-button-inner-left:after {
background: rgba(0, 0, 0, 0.15);
border: 0.125em solid white
}
.wpnm-button .wpnm-button-inner-left {
color: rgba(250, 250, 250, 0.51);
font-weight: bold
}
.wpnm-button.active .wpnm-button-inner-left {
color: rgba(149, 149, 149, 0.51);
font-weight: normal
}
.wpnm-button.active .wpnm-button-inner-left + .wpnm-button-inner {
color: rgba(250, 250, 250, 0.51);
font-weight: bold
}
This snippet is from a plugin, and the credit goes to the plugin’s author, Marko Arula.
- Add Dark Mode CSS Class to the Body Tag
Now you need to add this particular class to the body tag, as this will allow you to customize the layout later.
Let’s do that.
jQuery(function($) {
/*Click on dark mode icon. Add dark mode classes and wrappers.
Store user preference through sessions*/
$(‘.wpnm-button’).click(function() {
//Show either moon or sun
$(‘.wpnm-button’).toggleClass(‘active’);
//If dark mode is selected
if ($(‘.wpnm-button’).hasClass(‘active’)) {
//Add dark mode class to the body
$(‘body’).addClass(‘dark-mode’);
//Save user preference to Storage
localStorage.setItem(‘darkMode’, true);
} else {
$(‘body’).removeClass(‘dark-mode’);
localStorage.removeItem(‘darkMode’);
}
})
//Check Storage. Display user preference
if (localStorage.getItem(“darkMode”)) {
$(‘body’).addClass(‘dark-mode’);
$(‘.wpnm-button’).addClass(‘active’);
}
})
You can now inspect and test if the “dark-mode” CSS Class is added as a body class. Next, add a dark background to see if it’s working fine.
body.dark-mode * {
background: #333;
}
Since we’re doing it in the browser or client-side and the server doesn’t know anything, you’ll see that dark mode is loaded after the light mode is loaded. Here the body is rendered without dark mode in action, and JS waits for the DOM to load before adding the class.
So it’s not a perfect solution for the users; there should be a better way to improve the experience. Let’s find out what.
- Use Cookies to Store User Preferences Through Sessions
So let’s see how you can add the body class to the server to make it load before serving. The best way to do that is to use cookies to store user preferences. In this way, you’ve to create a cookie for the user’s dark mode preference and add the dark-mode body class accordingly.
It’ll enable the dark mode body class as the HTML renders. So you need to rewrite the JS code in the following way.
jQuery(function($) {
//Create the cookie object
var cookieStorage = {
setCookie: function setCookie(key, value, time, path) {
var expires = new Date();
expires.setTime(expires.getTime() + time);
var pathValue = ”;
if (typeof path !== ‘undefined’) {
pathValue = ‘path=’ + path + ‘;’;
}
document.cookie = key + ‘=’ + value + ‘;’ + pathValue + ‘expires=’ + expires.toUTCString();
},
getCookie: function getCookie(key) {
var keyValue = document.cookie.match(‘(^|;) ?’ + key + ‘=([^;]*)(;|$)’);
return keyValue ? keyValue[2] : null;
},
removeCookie: function removeCookie(key) {
document.cookie = key + ‘=; Max-Age=0; path=/’;
}
};
//Click on dark mode icon. Add dark mode classes and wrappers. Store user preference through sessions
$(‘.wpnm-button’).click(function() {
//Show either moon or sun
$(‘.wpnm-button’).toggleClass(‘active’);
//If dark mode is selected
if ($(‘.wpnm-button’).hasClass(‘active’)) {
//Add dark mode class to the body
$(‘body’).addClass(‘dark-mode’);
cookieStorage.setCookie(‘yonkovNightMode’, ‘true’, 2628000000, ‘/’);
} else {
$(‘body’).removeClass(‘dark-mode’);
setTimeout(function() {
cookieStorage.removeCookie(‘yonkovNightMode’);
}, 100);
}
})
//Check Storage. Display user preference
if (cookieStorage.getCookie(‘yonkovNightMode’)) {
$(‘body’).addClass(‘dark-mode’);
$(‘.wpnm-button’).addClass(‘active’);
}
})
- Add dark mode class via the body class filter
So we’ve set up a cookie named “yonkovNightMode,” It’ll be activated when the user chooses the “dark mode” option. But you’ve got to get this cookie with PHP first and then add that to the body class.
Copy and paste the following snippet in the functions.php file in your child theme.
<?php
/**
* Enable dark theme mode
* Forked from https://wordpress.org/plugins/wp-night-mode/
*/
function yonkov_dark_mode($classes) {
$yonkov_night_mode = isset($_COOKIE[‘yonkovNightMode’]) ? $_COOKIE[‘yonkovNightMode’] : ”;
//if the cookie is stored..
if ($yonkov_night_mode !== ”) {
// Add ‘dark-mode’ body class
return array_merge($classes, array(‘dark-mode’));
}
return $classes;
}
add_filter(‘body_class’, ‘yonkov_dark_mode’);
You’re Done
So you’ve actually created a fully functional prototype of a dark mode layout. The snippets were taken from open-source WordPress plugins. So you can use it on any of your WordPress websites to add the dark mode option for a better user experience.
2. Use Ready-made WordPress Themes having Dark Mode Option
How about choosing a ready-made WordPress theme that already has a dark mode toggle button installed? This way, you can use dark mode on your WordPress site without using a plugin. It’ll also help you avoid customization, as most of the themes need to be customized with the Night Mode Plugin or custom CSS codes.
So what are some WordPress themes that support the dark mode along with the light mode? Here, we’ve brought you some popular WordPress themes with a dark mode layout. Let’s find out.
- Twenty Twenty One: This is the default WordPress theme that comes with a dark mode layout. By default, it’s disabled, and you’ve to enable it from the Theme Options.
- Estera: It’s a popular WordPress theme for WooCommerce sites. It comes with a dark mode toggle button allowing the users to switch between light and dark modes.
- HIghStarter: This lightweight WordPress Theme is popular for portfolio sites. It has a dark mode switch without a plugin installed separately. And that allows the user to toggle between light and dark modes.
- Mate: It’s a beautifully designed WordPress theme that allows selecting between light or dark mode directly from the site header.
- Quomdo Theme: Quomdo Themes comes with alternative demos that have responsive accommodation for dark mode.
Manual Or Plugin Which Method To Use For Dark Mode Activation?
We’ve already discussed how you can manually activate dark mode on your WordPress website. And we know many of you will find enabling the dark mode a hassle, especially with the coding part.
So we recommend that you take it as the second option. Because when it comes to choosing between manual or plugin methods, we prefer going with the plugin option, as it can quickly and conveniently add a dark mode toggle button to the site.
Talking about a perfect plugin, we’ve got our favorite one to recommend here: the QS Dark Mode Plugin. It’s a plugin that brings a gorgeous dark scheme to your site and lets you cope with the ‘going dark’ trend.
Let’s check out why you should install a dark mode plugin — particularly the QS Dark Mode Plugin, and not go with the manual method.
QS Dark Mode Plugin: The Perfect Dark Mode Solution
There are quite a few reasons why the QS Dark Mode Plugin can be a perfect dark mode solution for your website. Some of these include:
- It’s free
- Custom CSS support
- Different dark switch styles, including different animations and CTA texts
- Offers time-based dark mode
- Option to optimize the button location
- Wide range of dark color schemes
- Dark mode-based image and font size support
- WooCommerce Supported
Installing the plugin is similar to installing any other plugin on your WordPress site. But if you’re still in a fix, we can help you with some instructions here. Let’s check it out.
- Download the QS Mode plugin and upload the files to the concerned directory, which is generally /wp-content/plugins/plugin-name directory
- To install the plugin directly from the WordPress plugin screen. Click Plugins > Add New from the WP dashboard, next search for the plugin in the search bar, and click install.
- Activate the QS Dark Mode plugin from the ‘Plugins’ screen
- Once activated, your dark mode should be enabled.
- You can switch to the dark mode by clicking on the toggle on your screen
- Click the toggle again to activate the light mode
To customize, you can check all the settings in the WP Admin Dark Mode Sidebar of the plugin
Can I Use Color Scheme When Dark Mode Is Active?
The dark mode looks to reduce the amount of white or blue light coming from the screen. It doesn’t mean you’ve got to go black all the time. You can still choose between color schemes even when dark mode is activated, like what you can do with the QS Dark Mode Plugin.
But the colors are chosen in such a way that the content is displayed in high contrast, with light foreground and dark background colors.
Conclusion
So is it possible to add dark mode to the WordPress website without a plugin? Yes, but unless you’re a theme developer or a coder yourself, you won’t prefer going for this manual method of doing that.
Instead, it’d be wiser and easier to add a dark mode plugin. We’ve mentioned our favorite plugin, the QS Dark Mode Plugin, which you can consider to make your site more presentable and eye-soothing.
Remember, going dark isn’t only about your eyes’ health but also about the aesthetic appeal of your website. By doing that, you can add an aura to the overall visual experience while also improving user engagement.
