Comment on page
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.
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.
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:
- 2.Light (Default option)
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.
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:
If you want to switch your entire site to a dark mode, the
.cf-theme-darkclass needs to be added to the
HTMLroot element. Remove it to switch back to the light theme.
If you want to switch just a single section, add a class
.theme-invertedto it. Thanks to this flexible feature, you can alternate color palettes of your sections using a single class.