400

About WordPress Dark Mode Without Plugin

You’ve likely been overloading your eyes due to long periods of time at the computer screen. Therefore, it’s essential to relax your eyes when using computers. One of the best ways to allow the eyes some rest is switching the display settings on your screen in dark-colored mode.

The owners of websites should consider adding a dark-colored mode on their sites to improve the visual experience. If your site is using WordPress to host your site including the dark mode will be simple. You can accomplish this either manually or through the installation of an extension.

We believe that this plugin is the most effective option for creating an alternative to dark mode of the WordPress website. However, we also have solutions to those who believe it’s impossible to turn on WordPress darkness mode with out using a plugin! Yeah, it’s possible.

We’ll be discussing creating a dark mode, both with and without the use of the plugin. We’ll also talk about which is the best in which area. In the following article, you’ll be introduced to one of our top plugins, called QS Dark Mode.

Stay on top of things!

The benefits by adopting Dark Mode in WordPress

Why should you use Dark Mode? Dark Mode in WordPress? There are a few excellent reasons for it. You’ve realized its necessity while you browse on your PC at night , tired eyes.

As a website administrator you will be able to provide many benefits to your customers by incorporating this feature to your site. Additionally, it will enhance your company.

There’s more to its advantages Let’s explore the benefits below.

• Diminishes the white light coming off the computer’s screen. This reduces the amount of white light coming from
• Reduces eye strain
• It reduces energy consumption and prolongs the battery’s lifespan.
• Improves the time on page by enhancing the user experience
• Gives a beautiful aura

That’s all the reasons Dark Mode is a great alternative for your WordPress website.

WordPress Dark Mode Without Plugin – Is It Possible?

 

This is the part that’s fun. We’ll show you how you can turn off the lights on your WordPress website and without the need to install any plugin.

Two ways that you can accomplish this:

1. Dark mode can be added by making use of HTML CSS, CSS, or JQuery
2. By using themes pre-made and dark mode activated

Let’s examine each of these techniques in greater detail in the following paragraphs.

1. Dark mode can be added by making use of HTML CSS, HTML and JQuery

If you’re a creator then you must use this method of manual inclusion of an option to toggle the dark mode on your WordPress website. This method requires you to have to do some coding in relation with HTML, CSS, and JQuery.

Do not fret when you are struggling to code as you can easily access accessible code snippets. Therefore, you just need to paste them into the right place to enable Dark mode.

Don’t be afraid to use these snippets of code since they’re free and open source to use.

• Add the HTML Code Snippet

Then, you need to first, you must add first, you need to add HTML code to create the dark mode toggle button. All you have to do is paste the following excerpt into the footer or header of your theme.

• Style using CSS

Now , you’ll need to dress your switcher or dark mode button using the following CSS code.

*/ The 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);

Normal font-weight

}

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

}

.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);

Bold fonts: heavy font

}

.wpnm-button.active .wpnm-button-inner-left {

color: rgba(149, 149, 149, 0.51);

Normal font-weight

}

.wpnm-button.active .wpnm-button-inner-left + .wpnm-button-inner {

color: rgba(250, 250, 250, 0.51);

Bold fonts: heavy font

}

This text is an application, and the credit is due to the author of the plugin, Marko Arula.

• Add Dark Mode CSS Class to the Body Tag

• 

  WordPress Dark Mode Without Plugin – Is It Possible?

Then you must include this specific class in the body tag because it will let you alter the layout later on.

Let’s go for it.

jQuery(function($) {

/*Click on dark mode icon. Create dark mode class and wrappers.

User preference is stored through sessions*/

$(‘.wpnm-button’).click(function() {

// Show either sun or moon.

$(‘.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 preference of the user to the Storage

localStorage.setItem(‘darkMode’, true);

else If not, it’s

$(‘body’).removeClass(‘dark-mode’);

localStorage.removeItem(‘darkMode’);

}

})

//Check Storage. Show preference of the user

if (localStorage.getItem(“darkMode”)) {

$(‘body’).addClass(‘dark-mode’);

$(‘.wpnm-button’).addClass(‘active’);

}

})

You are now able to examine and verify to see if it’s working “dark-mode” CSS Class is added as a bodyclass. The next step is to create a dark background and check if it’s working.

body.dark-mode * {

background: #333;

}

Because we’re working in the browser or on the client side and the server isn’t aware of what’s going on, you’ll notice how dark mode loads following the light mode has been loaded. The body is rendered with no dark mode as well JS is waiting for the browser to start loading prior to making the change to the class.

It’s not the best solution for users, there must be more effective ways to enhance the user experience. Let’s discover the best way to do it.

 

• Use Cookies to Store User Preferences Through Sessions

Let’s look at how you can incorporate the body class into the server in order to have it load prior to serving. The best method for doing that is to make use of cookies to store user preferences. To do this, you’ll need created a cookie to store the user’s preference for dark mode and then add the dark-mode body class to match.

It will activate the body classes in dark mode when the HTML renders. Therefore, you must rewrite the JS code using the following method.

jQuery(function($) {

// Create the cookie object.

{var cookieStorage = CookieStorage = cookie

setCookie function setCookie(key value time and path) {setCookie: function setCookie(key, value, time, path)

Variable expires = new date();

expires.setTime(expires.getTime() + time);

pathValue = pathValue;

If (typeof path = “undefined”) {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. Include dark mode wrappers and classes. Keep user preferences in session

$(‘.wpnm-button’).click(function() {

//Show sun or moon

$(‘.wpnm-button’).toggleClass(‘active’);

//If dark mode is selected

if ($(‘.wpnm-button’).hasClass(‘active’)) {

//Add dark mode classes to the body

$(‘body’).addClass(‘dark-mode’);

cookieStorage.setCookie(‘yonkovNightMode’, ‘true’, 2628000000, ‘/’);

else Other than that,

$(‘body’).removeClass(‘dark-mode’);

setTimeout(function() {

cookieStorage.removeCookie(‘yonkovNightMode’);

}, 100);

 

})

//Check Storage. Set user preferences

if (cookieStorage.getCookie(‘yonkovNightMode’)) {

$(‘body’).addClass(‘dark-mode’);

$(‘.wpnm-button’).addClass(‘active’);

}

})

 

• Dark mode mode via the class filter in the body

So we’ve put together the cookie “yonkovNightMode,” It’ll be activated when a user selects”Dark Mode. However, you must create this cookie using PHP first, and then add it to the body class.

Paste and copy the text into the functions.php file within your child theme.

 

/**

* Turn on the 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 kept..

if ($yonkov_night_mode !== ”) {

// Add “dark-mode” body class

return array_merge($classes, array(‘dark-mode’));

}

Return $classes in return;

}

add_filter(‘body_class’, ‘yonkov_dark_mode’);

You’re Done

You’ve created an entirely functional prototype for the layout in dark mode. The code snippets are taken directly from open source WordPress plugins. You can apply it on one or all of the WordPress websites to include the dark mode option to provide the best user experience.

1. Utilize ready-made WordPress Themes that have Dark Mode Options

2. 

   WordPress Dark Mode Without Plugin – Is It Possible?

Why not choose a pre-made WordPress theme that has an option to toggle dark mode that is installed. This way, you’ll be able to apply dark mode to your WordPress website without having to install the plugin. This will also allow you to not have to modify your theme as the majority themes must be customized using The Night Mode Plugin or custom CSS codes.

So , what are the best WordPress themes that work in dark mode as well as light mode? Here’s a list of several popular WordPress themes that support dark mode layouts. Let’s see what they are.

• Twenty Twenty One It’s the standard WordPress theme, which comes with a dark-colored layout. By default, it’s not enabled and you’ll need to enable it in your Theme Options.
• EsteraIt’s an extremely popular WordPress theme that is suitable for WooCommerce websites. It includes the dark mode toggle button that lets users switch between dark and light mode.
• HighStarterThis lighter WordPress Theme is popular for portfolio websites. It features a dark-mode switch, which is not the need for a plugininstalled separately. It also allows users to switch between dark and light modes.
• MateIt’s an exquisitely-designed WordPress theme that lets you select between dark and light modes directly from the header of the website.

 

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

We’ve discussed before how to manually activate the dark-mode feature on the WP website. We’re certain that those who enable dark mode to be a hassle particularly the code part.

Therefore, we suggest you consider it as a second alternative. Since when you have to choose between manual and plugin methods we would recommend the plugin method since it’s quick and simple to implement an option to toggle the dark mode to your site.

If you’re looking for a great plugin We’ve got our preferred one for you to consider which is the QS Dark Mode plugin. This plugin brings an amazing dark theme to your site and helps you deal with the “going dark trend.

Let’s look at the reasons the reasons to install an dark mode pluginspecifically, using the QS Dark Mode plugin and not go using the manual approach.

QS Dark Mode Plugin: The Perfect Dark Mode Solution

There are many reasons QS Dark Mode plugin can be an ideal Dark Mode solution to your site. There are a few of them:

• It’s absolutely free
• Custom CSS support
• Different styles of dark switch with different animations, as well as CTA messages
• Offers time-based dark mode
• Option to optimize the button’s location
• The vast array of dark shades
• Dark mode-based support for font size and image
• WooCommerce Supported

In terms of installing this plugin, the process is as adding any other plug-in on your WordPress website. If you’re struggling and need help, we’ll be able to assist by providing some tips here. Let’s look at.

• Download the QS Mode plugin and upload the files to the concerned directory, which is generally /wp-content/plugins/plugin-name directory
• Install the plugin, you must do it via your WordPress screens for plugins. Click the Plugins tab, then Add New from the dashboard of WordPress. Next, type the plugin’s name into the search bar and select install.
• Make sure to activate your QS Dark Mode plugin by going to the “Plugins” screen
• After activation the dark mode will be turned on.
• You can change to the dark mode by simply clicking the toggle icon on your screen.
• The toggle is again pressed to turn on the light mode.
• To alter the settings, examine all settings in the WP Dark Mode Admin Sidebar of the plugin.

Can I Use Color Scheme When Dark Mode Is Active?

The dark mode appears to decrease any white or blue light that is coming through the screen. This doesn’t mean that you have to be completely black. It is possible to select colors regardless of whether dark mode has been turned on such as what you can achieve with the QS Dark Mode Plugin.

The colors are picked in a manner that the content is presented in high contrast against the foreground being light and dark colors.

Conclusion

It is possible to include the dark-mode featureto your WordPress website without the need for a plugin. If you’re not a theme creator or coder, you’ll opt for this manual method to accomplish this.

It’s better and more simple to install the Dark Mode plugin. We’ve highlighted our preferred plugin that we recommend, The QS Dark Mode plugin that you might want to think about to make your website more attractive and soothing to the eyes.

Keep in mind that dark sites aren’t just about your eyes’ health, but also about the visual appeal of your site. If you do this you’ll be able to enhance your overall visual experience, as well as increase engagement with your users. 

How To Edit WooCommerce Add To Cart Button

How Does Alcohol Affect Weight Loss? Find Out the Surprising Truth!

How to Edit WooCommerce Shop Page W/O Elementor ?