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

# Dark Mode

With dark mode now a prominent feature in many operating systems, it’s increasingly common to create a dark version of your website alongside the default design.

Elements supports automatic switching between light and dark mode. This approach enables automatic theme switching based on the user’s system (or browser) settings, ensuring websites adapt seamlessly to both light and dark modes.

{% embed url="<https://youtu.be/-Ma5OBAbXbk>" %}

### Choosing Colours

For Light and Dark mode to work seamlessly, we recommend basing your website on four colour roles: **Brand**, **Accent**, **Surface** and **Text**.

* For the **dominant colour** of your website we recommend using the **Brand** colour from the Theme Studio.
* For **Elements** like Buttons, colour fill on Icons, Dividers, we recommend using **Accent** colour from the Theme Studio.
* For **Background** colours we recommend using the **Surface** colour from the Theme Studio.
* For **Text colours**, we recommend using the **Text** colour from Theme Studio.

### Changing Colours based on Mode

Every colour in Elements supports Light and Dark modes. This means you can change the colour of text, backgrounds, buttons, borders and more based on the user's system settings.

By default, a colour is set for Light Mode. To set an alternative colour for Dark Mode, click the Dark/Light Mode toggle at the top of the editor.

### Page Background Colour

You can set the website background colour for Light and Dark modes under **Theme Studio → Page**. You can also override the colour for an individual page using the Page Inspector in the main editor.

<figure><img src="/files/Mrja2Bp9Cb7OuxbjKqah" alt="Theme Studio Page settings with separate light and dark background colours"><figcaption></figcaption></figure>

### Disabling Dark Mode

If you don’t want Dark Mode on your website, disable it in Project Settings. This hides the option to switch between light and dark modes, and Elements will preview and export only the light version of your website.

<figure><img src="/files/jqpWAq2x3WKUrdY0FCaD" alt="General Project Settings with the Allow Dark Mode switch highlighted"><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/using-elements/design-and-theming/dark-mode.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.