How to use the Color Palette Switch (Dark Mode)

As of Kadence Pro version 1.0.3, there are options to enable a color switch for your users to select a “dark mode” of your website. See an example site to try it out. The approach we took with Kadence was to provide a lightweight option to have a dark mode. Because of that, this tool does not generate dark mode CSS and it may not work out of the box with many plugins or complex sites. There are robust dark mode plugin solutions that will work with Kadence if you are wanting to make a dark mode for a really complex site, however, these can come with a performance hit. The intention of this tool is to be light and work tightly with the Kadence Global colors.

To get started you will need to enable the module under Appearance > Kadence in the WordPress admin.

Once you have the Color Palette Switch enabled you will find new settings under Appearance > Customize > General > Color Switch (Dark Mode).

Once enabled you can choose to add a fixed switch to your site. Please note you can also add a switch in the header builder or footer builder if you don’t want it to be fixed on the screen. To use those switches just go to the header builder or footer builder and add the color switch element.

Now to make the switch work you need to set up your “dark” color palette under General > Colors in the customizer. In the example site above, Palette 1 is the light color palette and Palette 2 is the dark color palette.

If you want a quick way to experiment you can click the folder icon in the global palette settings to import a dark palette on your site.

Once you have a light and dark palette setup you can experiment with the toggle on your site. Depending on which plugins you are using it’s possible you will have some things that are not attached to the theme global colors and therefore do not switch when toggled. In this situation, you may need to add custom CSS to the customizer > custom CSS input to change those styles when in dark mode.

The key is that in dark mode a class (color-switch-dark) is added to the body tag, this lets you target CSS only for dark mode. Here is an example:

.color-switch-dark .custom-class-that-needs-color-changed {
color:var(--global-palette4);
}