Many people (me) are using dark mode/theme on browser and their phone, we can also make our website convert to dark mode when customer access your website. After the first time access, the preference will storage in local storage on client side. If customer want to toggle to either light mode or dark mode, they can simple click the button to change their preference.
Dark mode via plugin
You can simply install WP Night Mode to add the button in your WordPress, it is opensource. The plugin provide five different style of button.
Dark mode via CSS and edit theme
If you want to customize the button and reduce the use of plugin, you can follow the below tutorial. the following code is extracted from the plugin, only the style 2 is active. If you need to change the style simply copy the style from WP Night Mode and paste without the tag “style-1”.
CSS style
First, add the following into theme style sheet (Dashboard > Appearance > Theme Editor > style.css) or Additional CSS (Dashboard > Appearance > Customize > Additional CSS)
/*
*
* Dark mode switcher CSS
*/
.wpnm-button{/*edit the size of the button*/
font-size: 18px
}
.wpnm-button-inner-left:empty
{
margin-left: -0.5em
}
.wpnm-button-inner-left:before, .wpnm-button-inner-left:after{
box-sizing: border-box;
margin: 0;
padding: 0;
/*transition*/
outline: none
-webkit-transition: .4s ease-in-out;
-moz-transition: .4s ease-in-out;
-o-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
.wpnm-button .wpnm-button-inner, .wpnm-button .wpnm-button-inner-left{
display: inline-block;
font-size: 0.8em;
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: 2em;
text-indent: 2em;
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;/*edit the color of light mode button*/
transform: rotate(-45deg);
box-shadow: 0 0 0.625em white /*edit the background color of light mode button*/
}
.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 /*edit the border color of light mode button*/
}
.wpnm-button.active .wpnm-button-inner-left:before{
right: 1.0625em;
box-shadow: 0.3125em 0.3125em 0 0 #71adff;/*edit the color of dark mode button*/
background: transparent
}
.wpnm-button.active .wpnm-button-inner-left:after{
background: rgba(0, 0, 0, 0.15);
border: 0.125em solid;
border-color:#71adff /*edit the color of dark mode button*/
}
.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
}Theme edit with local-storage preference
We need to create a JavaScript file inside your theme, please find your WordPress location and create the file, example location:
/var/www/html/wp-content/themes/astra/js/dark-mode.js
location format:
/<your wordpress location>/wp-content/themes/<your theme name>/js/dark-mode.jsdark-mode.js
Within the file, you need to add following code:
jQuery(document).ready(function($) {
//Button function setup
$('.wpnm-button').click(function() {
$('.wpnm-button').toggleClass('active');
if ($('.wpnm-button').hasClass('active')) {//if dark mode
$('body').addClass('dark-mode');//add dark-mode class to body
localStorage.setItem('DarkMode', true);//set preference in local-storage to true
} else {
$('body').removeClass('dark-mode');
setTimeout(function() {
localStorage.setItem('DarkMode', false);//set preference in local-storage to false
}, 100);
}
})
//Check local-storage
if (localStorage.getItem('DarkMode')=='true') {
$('body').addClass('dark-mode');
$('.wpnm-button').addClass('active');
}else{
$('body').removeClass('dark-mode');
$('.wpnm-button').removeClass('active');
}
if (localStorage.getItem('DarkMode') ===null && window.matchMedia('(prefers-color-scheme: dark)').matches)
{
localStorage.setItem('DarkMode', true);
$('body').addClass('dark-mode');
$('.wpnm-button').addClass('active');
}
})
function.php
We need to import the dark-mode.js and check the preference every time, so the code in function.php will have following parts:
Import dark-mode.js
/********
* Import dark-mode.js
*/
add_action( 'wp_enqueue_scripts', 'darkmode' );
function darkmode() {
wp_enqueue_script(
'darkmode', // name your script so that you can attach other scripts and de-register, etc.
get_stylesheet_directory_uri() . '/js/dark-mode.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}Checking local-storage preference
function dark_mode($classes) {
$DarkMode = "<script>document.write(localStorage.getItem('DarkMode'));</script>";
//if the cookie is stored..
if ($DarkMode=='true') {
// Add 'dark-mode' body class
return array_merge($classes, array('dark-mode'));
}
return $classes;
}
add_filter('body_class', 'dark_mode');Apply dark mode to more element via CSS
If some of the element in your theme didn’t change, you can manually apply to specific id/class/element, or with :hover :active. Check W3school to learn more about CSS selectors.https://www.w3schools.com/cssref/css_selectors.asp https://www.w3schools.com/css/css_selectors.asp
//simple format:
body.dark-mode <element/class/id>{
}e.g. I want all the input field background transparent with white font color when in dark mode, the code will be:
/* Comment input
*/
body.dark-mode input{
background-color:rgba(0,0,0,0);
color:#fff;
}