GreenShift 8.3 version has completely new Dark Mode options, let’s dive in
Dark mode colors
Colors can be set in two ways – in Dark mode switcher block or globally in Stylebook
Dark mode switcher
This block allows you to add a switcher to your site which changes the site to dark mode. It also allows to detect of general theme colors and GS custom colors and replaces them in dark mode. So, when the user changes dark mode, then replaced colors will be used.
Most of the time, you need to change only base/contrast colors. if theme has good support for dark mode, this will change color of background and content to the opposite.
Switcher block will saves colors in block, so they will be replaced only in place where you have this block.
Stylebook dark mode
You can also replace colors globally in Stylebook (Greenshift – Stylebook).
Stylebook colors will be saved globally, so it will work also in admin area and on all pages of site.
Both stylebook and switcher block will use replacement for colors if you have special class on body “darkmode” or attribute on root element :root[data-color-mode*=”dark”]
Most of themes are supported. For example, you can use it also with Blocksy Dark Mode extension and it will work. Even if theme doesn’t have dark mode option, you can use dark mode switcher from Greenshift
Custom Dark mode
You can also use dark mode switcher and set own classes and cookie names, then, you need to build own styles and place in Advanced – responsive
Example
body.nightmode{--wp--custom--color--white: black; --wp--custom--color--black: white}So, we just reverting black and white colors.
How to prevent Style flashing
When you enable dark mode, 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.
You can enable server side checking for dark mode in Greenshift – Settings – Css options
If you build own dark mode, 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