New! Introducing Dark Mode Color Palette Switch for Kadence Theme Pro

Kadence Theme Pro just got a new way to add a “dark mode” color palette switch for your website. As with all things Kadence, we built the color palette switch for dark mode with a focus on performance and ease of use. With no complicated settings and designed to work with the WordPress customizer, you can easily add a dark mode option to your WordPress site in just a few clicks.

What is Dark Mode?

In terms of UX/UI design, “dark mode” (or “night mode”) is a display setting for user interfaces that changes the default presentation of dark text on a light background. With dark mode, light color text (white or grey) is presented against a dark or black screen, instead of the default white background with dark text.

While you made have only thought of dark mode’s applications for your phone or laptop, dark mode can also be useful for websites.

Benefits of Dark Mode

Although the science is still out, dark mode interfaces may help ease eye strain and eye fatigue by reducing blue light emissions from screens. As a design trend, dark mode creates a high-contrast, bold aesthetic that highlights colorful content, like photos or illustrations. Dark mode makes these things pop in a specific way that light mode can’t. That’s probably why popular media apps like Netflix and Spotify were designed with dark mode as the default.

Things to Consider Before Adding a Dark Mode Option to Your Website

Keep in mind that dark mode may not be the best option for some sites and may require some planning and testing. Before adding a dark mode option, you’ll want to think through the photos or graphics on your site, along with your current color scheme. You’ll also want to take a thorough audit of the plugins on your site that add their own colors schemes or generate their own CSS.

7 Reasons to Love Kadence Theme Pro’s Dark Mode Color Palette Switch

The dark mode color palette switch in Kadence Theme Pro has a few features you’ll love:

  1. Built with performance in mind – Like always, the dark mode color palette switch in Kadence won’t slow down your site. 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. The intention of this tool is to be light and work tightly with the Kadence Global colors.
  2. No complicated settings – Once enabled from your Kadence Theme Pro Addons page, you can set up dark mode from the built-in WordPress customizer.
  3. Done-for-you toggle/switch design – Kadence Theme Pro gives you several options for your dark mode toggle switch. This is the toggle users see on the frontend of your site to switch between dark and light mode.
  4. Customizable dark mode color palette – Kadence Theme Pro uses the Global Pallete 2 to render your dark mode color optoins. 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.
  5. OS aware – This setting will use the user’s computer settings to choose the default palette for them.
  6. Add dark mode toggle to header or footers – The Kadence Theme header and footer builder now includes an option to add your dark mode toggle either to your header or footer.
  7. Add an alternate site logo for dark mode – As some logos may have been designed for a light background, Kadence Theme allows you to upload an alternate version of your site’s logo to be displayed when dark mode is enabled.

How to Get Started with Dark Mode Color Pallete Switch in Kadence Theme Pro

To get started, you’ll need Kadence Theme Pro.

Once you install and activate the Kadence Pro plugin for Kadence theme, navigate to Appearance > Kadence > Dashboard in your WordPress admin.

From the Pro Addons section, enable the module for Color Palette Switch.

Color Switch Settings

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

Setting Up Your Dark Mode Color Palette

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.

NOTE: It’s critical that you are using the Kadence Global Color Palette correctly and assigning these colors on your site. To learn more on that please read How to use the Kadence Theme 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. You can read more in Kadence documentation about dark mode.

Here is an example:

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

Adding a Dark Mode Header Logo

Finally, you can add an alternate logo for your site when in dark mode. Use the Dark Mode Header Logo section to upload your alternate image.

Color Switch (Dark Mode) Switch/Toggle Setup

Once enabled, you can choose to add a fixed switch to your site. This is the toggle users will use to switch between color palettes, like this:

From the Customizer’s settings panel,

  • Select between the switch type (icons, text, or icons and text) and the switch style (button or switch).
  • Select your icons, with several options to choose from to indicate light mode and dark mode.
  • Set your icon size and switch colors.
  • You can also customize the text label font and titles.

Assigning a Toggle Switch Location (Header or Footer)

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.

Buy a Kadence Bundle & Get Access to Kadence Theme Pro with Dark Mode

Sign up for one of our bundles to access our Kadence plugins and themes, including Kadence Theme Pro and Kadence Blocks Pro.

In addition to all the Pro add-ons for Kadence Theme, you’ll get access to an additional library of PRO starter templates, ONLY included with one of our value-packed bundles, including the Essential Bundle, Full Bundle, or Lifetime Bundle. 30-day money-back guarantee. No questions asked!

Leave a Reply

Your email address will not be published. Required fields are marked *