> For the complete documentation index, see [llms.txt](https://docs.coreframework.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.coreframework.com/how-to-use/dark-mode.md).

# 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

{% embed url="<https://coreframework.wistia.com/medias/8ltk5no5l3>" %}

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. &#x20;**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.

{% hint style="info" %}
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.
{% endhint %}

### 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.&#x20;

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](https://coreframework.com/marketplace/oxygen-builder-addon) and [Bricks Builder](https://coreframework.com/marketplace/bricks-builder-addon), we've included a custom toggle element that you can use and edit directly in the builder.&#x20;

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`

{% hint style="info" %}
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.
{% endhint %}