Dark Mode

Equip your sites with both light and dark color schemes in a few simple clicks. Site's color scheme can be toggled manually or automatically based on user's system preferences.

How to set up your color palette for a dark mode

Making your site ready for the use of Dark Mode is straightforward and easy in Core Framework.

1. First of all, navigate to the Colors pane

2. Choose a color you want to alternate and expand the color settings

3. Enable Dark Mode

Now when your color has a dark mode enabled, you will see a second input right next to the base input for the color. That's where you choose the secondary color for a dark mode.

Not every color requires to have a dark mode enabled. Colors that don't have the option enabled will display the same color in both modes.

How to switch the color mode on the front end

After your color palette is set up, you can choose a method for switching the color mode.

Head over to the Preferences pane, and look for the Dark Theme option, where you can choose from:

1. Automatic

2. Light (Default option)

3. Dark

The automatic method will auto-choose light or dark scheme for the user, based on their system preferences.

If you choose a light or a dark option, the selected color palette will be displayed all the time, until you switch theme manually.

How to switch the color mode manually

If you're using one of our add-ons for Oxygen Builder and Bricks Builder, we've included a custom toggle element that you can use and edit directly in the builder.

You can also manually switch the theme not only for the full site, but also specific sections or divs.

There are 2 classes that are handling themes:

• .cf-theme-dark

• .theme-inverted

If you want to switch your entire site to a dark mode, the .cf-theme-dark class needs to be added to the HTML root element. Remove it to switch back to the light theme.

If you want to switch just a single section, add a class .theme-inverted to it. Thanks to this flexible feature, you can alternate color palettes of your sections using a single class.

Furthermore, we understand that some specific elements and/or sections should never alternate between light and dark mode when toggling, so we have introduced to new classes in version 1.6:

• .theme-always-light

• .theme-always-dark

If you apply one of these classes to a parent element, but you're still seeing child content change when toggling, then you will need to make sure those elements are also using correct variables/classes.