WordPress Dark Mode Without Plugin – Is It Possible?

Rate this post

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 display setting to dark mode.

The website owners should and can add a dark mode to their websites to enhance their visual experience. If you’re using WordPress for your site, adding the dark mode should be easy peasy. You can do it both 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 the 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 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?

How to add dark mode to my WordPress admin

Now comes the fun part. Here we’ll see how you can switch off the lights for your WordPress site without installing any plugin.

There are two ways you can do this —

  1. Adding dark mode by using HTML, CSS, and JQuery
  2. 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 to 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.

  • 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 in 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.

How to add dark mode to my WordPress admin

  • 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.

How to add dark mode to my WordPress admin

  • 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 the 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’);

}

})

How to add dark mode to my WordPress admin

  • 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 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 the open-source WordPress plugins. So you can use it to any of your WordPress websites to add the dark mode option for a better user experience.

  1. 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 in your WordPress site without using a plugin. It’ll also help you to 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 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 mode.
  • 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 mode.
  • Mate: It’s a beautifully designed WordPress theme that allows selecting between light or dark mode directly from the site header.

How to add dark mode to my WordPress admin

Manual Or Plugin Which Method To Use For Dark Mode Activation?

We’ve already discussed how you can manually activate dark mode on your WP website. And we know many of you’ll find enabling the dark mode to be hassling, especially with the coding part.

So we recommend you to take it as the second option. Because when it comes to choosing between manual or plugin methods, we prefer going for 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 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

Regarding the installation of the plugin, it’s just like installing any other plugin to your WordPress site. But if you’re still in a fix, we can help you with some instructions here. Let’s check 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 plugins 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 color or blue light coming from the screen. It doesn’t mean you’ve 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 QS Dark Mode Plugin.

But the colors are chosen in a way that the content is displayed in high contrast with light foreground and dark bg colors.

Conclusion

So is it possible to add dark mode to the WordPress website without a plugin. 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.

Astra Pro vs Elementor Pro – Head To Head Comparison