How to implement dark mode on WordPress theme without plugin

Implementing dark mode feature on WordPress is not an easy task compared to static websites, that’s why I wrote this article to share with you without using plugin.

Dark Mode feature is currently implemented on many webs, so, if you are WordPress developer and you are not yet creating it, then your clients are missing important feature to their visitors.

There are many plugins used to implement it with just one click installation, but as developer, you might miss full control on future if third party programmer deciding to shut it down.

To implement the dark mode on your WordPress theme with checkbox, you need five codes as follows;

Dark mode class

You have to register dark mode class on body classes on function.php or any file that included on it, by pasting the following codes;

/**
 * Enable dark theme mode
 * @bansta dark mode theme
 */
function ts_dark_mode($classes) {
    $ts_night_mode = isset( $_COOKIE['tsNightMode'] ) ? $_COOKIE['tsNightMode'] : '';
    //if the cookie is stored..
    if ($ts_night_mode !== '') {
        // Add 'dark-mode' body class
        return array_merge($classes, array('dark-mode'));
    }
    return $classes;
}
add_filter('body_class', 'ts_dark_mode');

HTML checkbox

You have to place checkbox on your header.php or off-canvas HTML to make it visible to user, so that they can have full control of their choice, just like this code implemented on Bansta theme;

<!--TS Dark Mode -->
				<div class="dark-mode-switch col-ts-1">
					<label>
						<input type="checkbox" id="switch">
						<span class="slider">
							<i class="fa fa-moon-o"></i>
						</span> 
					</label>
				</div><!--End TS Dark Mode -->

CSS Dark mode on checkbox

You have to styling your checkbox as dark mode switch button, so that the user of your WordPress theme understands the output of your designing. Check below CSS created by Bansta theme’s author (TS Dbasy);

#switch {
    display: none;
}
label .slider {
    width: 33px;
    height: 18px;
    background-color: #484848;
    display: inline-block;
    cursor: pointer;
    position: relative;
    border-radius: 15px;
    margin: 6px 0;
}
.fa-moon-o::before {
    color: #FFFFFF;
    font-size: 17px;
    position: absolute;
    top: 1px;
    transform: rotate(210deg);
    left: 16px;
}
.dark-mode .fa-moon-o::before {
    display: none;
}
label .slider::before {
    width: 16px;
    height: 16px;
    position: absolute;
    display: block;
 	background-color: #FFFFFF;
    content: "";
	bottom: 1px;
    border-radius: 25px;
    transition: .3s all ease-in-out;
}
.dark-mode .slider::after {
    content: "\263C";
    font-size: 18px;
    position: absolute;
    top: -6px;
    left: 0;
}
#switch:checked + .slider,
.dark-mode .slider {
    background-color: #484848;
}
.dark-mode .slider::before {
    -webkit-transform: translateX(15px);
    -ms-transform:translateX(15px);
    transform: translateX(15px);
    box-shadow: 0 2px 8px 0;
}

Scripts

You have to create event on action done by visitors while opting or neither implement dark mode. You can use any script of your choice, I suggest vanilla Js or react because they load faster than Jquery as follows;

( ()=> {
    'use strict';

    if ( 'getElementById' in document && 'addEventListener' in window ) {

    //Create the cookie object
    const 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

    const swichi = document.getElementById( 'switch' );
    const bode = document.getElementById( 'site-body' );
    swichi.addEventListener( 'click', ()=> {
        //show either moon or sun
        swichi.classList.toggle( 'activu' );
        //if dark mode is selected
        if ( swichi.classList.contains( 'activu' ) ) {
            //add dark mode into body 
            bode.classList.add( 'dark-mode' );
            cookieStorage.setCookie('tsNightMode', 'true', 2628000000, '/');
        } else {
            bode.classList.remove( 'dark-mode' );
            setTimeout( ()=> {
                cookieStorage.removeCookie('tsNightMode');
            }, 100);
        }
    });

    //Check Storage. Display user preference 
    if (cookieStorage.getCookie('tsNightMode')) {
        bode.classList.add( 'dark-mode' );
        swichi.classList.add( 'activu' );
    }
}
}) ();

Enqueueing scripts

Attach dark-mode script to the fuction.php or any page linked to it, and everything with run just fine.

wp_enqueue_script( 'ts-dark-scripts', get_template_directory_uri() . '/assets/js/dark-mode.js', array(), false, true );

OK!!!!! This is how we do it.