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.
First of all, navigate to the Colors pane
Choose a color you want to alternate and expand the color settings
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:
Automatic
Light (Default option)
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.
Last updated