Dark theme switcher

This feature is called Dark theme. When you want the some other pages in Dark mode. To apply a dark mode we need to installe following add-ons, php and css.

All the code required for the automatic dark mode goes into the Script Organizer or functions.php file.

Step 1) Create a custom field
Field Groups > Dark Mode for Page
  • Label: Dark Mode On
  • Name: dark_mode_on
  • Type: True / False
field label

Setting > Post Type is equal to Page

Presentation > Position: Side

setting

Step 2) Added [php] Dark Theme

The function adds a class to the body definition. If the dark mode is true this function is adding .dark-mode class to the body.

				
					<?php
add_filter( 'body_class', function( $classes ) {
    // Check if page
    if ( is_page() ) {
        // get ACF field and load into $body_class var
        $body_class = get_field( 'dark_mode_on' );
        // if True output body class
        if ( $body_class ) {
            $classes[] = 'dark-mode';
        }
    }
    // check if blog page
    if ( is_home() ) {
        $classes[] = 'dark-mode';
    }
    // check if archive page
    if (is_post_type_archive('blog')) {
        $classes[] = 'dark-mode';
    }
    return $classes;
} );
?>

Step 3) Add CSS

Style the body element that have .dark-mode class. Change the background color, text color of specific element with the class.

				
					/* Dark mode*/
.dark-mode {
	background-color: #000;
}

.dark-mode header {
	background-color: #000 !important;
}

.dark-mode #main-header a:not(.elementor-sub-item) {
	color: #fff !important;
}

.dark-mode .elementor-widget-theme-site-logo img {
	filter: invert(1);
}

.dark-mode .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after {
	background-color: #fff !important;
}

.dark-mode header .elementor-widget-icon svg path {
	stroke: #fff !important;
}

Turn on Dark theme on the page

At the bottom, right, on the page: > Checked: Dark Mode on

Screen Shot 2565 11 15 at 14.51.48

Example site: https://charlescoaching.kinsta.cloud/