# Dark Mode

### 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.coreframework.com/how-to-use/dark-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.