How to add Night Mode with Greenshift WordPress plugin

In Greenshift 3.7, we added special cookie option for button. Now, you can save cookie on user click and add/remove classes to Body which will be attached to this cookie.

One of possible example how flexible this option is the ability to add Night mode.

Your theme must be prepared for Night Mode, it must use variable CSS for background and for text colors.

If you check code of Body tag in console, you can find next

As you see, body background and text color are saved as variables and blocks use these variables to style blocks.

How to make Night Mode in Greenshift theme

Greenshift theme is companion theme for Greenshift plugin. So, it has better integration with plugin. You can use a predefined pattern which has all required settings for Nightmode switcher.

To add a pattern, click on top left icon, select Patterns – Greenshift Elements and find Night Mode element, insert on page.

Also, in Greenshift settings – enable Nighmode Cookie option (This will prevent style flashing on loading)

How to add Night Mode in BlockPress theme or other

If you have Query Addon, select Switcher block and enable Icons Inside Preset

Enable also Saving to Local storage and add Body Class on saving “nightmode”

If you don’t have Query addon, you can use Button block.

In this case, we add button block from Greenshift and we added special cookie and special class nightmode. Once the button will be clicked, we save the cookie and save attached class “nightmode” to body.

Now, we can use this class to revert colors with next code

body.nightmode{--wp--custom--color--white: black; --wp--custom--color--black: white}

So, we just reverting black and white colors. You can add this code to button options in Advanced – Responsive and custom CSS. Don’t forget to enable removing cookie on secondary click. This will turn button to be toggle button. We can even add different styling for such button in options.

How to prevent Style flashing

When you enable nightmode, button will check cookie by script, but here we can have problem because scripts are loaded in last order and this can make style flashing between initial page and time when script added nightmode class to page. In Greenshift companion theme, you can enable nightmode cookie checking before loading in Appearance – Theme Options.

In other themes, you may need additional code for functions.php or child theme (or use Code snippet plugin)

add_filter('body_class', 'yourtheme_theme_body_classes');
function yourtheme_theme_body_classes($classes){
	if (isset($_COOKIE['nightmode'])){
		$classes[] = 'nightmode';
	}
	return $classes;
}

Make sure that you added cookie as name “nightmode” in your button or switcher block