> 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

Automatic colour switching based on the user's system settings

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="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2FUXyNF5r4hVSgxHdNPskR%2FCleanShot%202025-09-17%20at%2011%E2%80%AF.50.33%402x.png?alt=media&amp;token=7f2b2265-2781-4d2f-8220-d3877440a0f9" 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="https://3876014504-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNy6AECEVH2p4eFDicpM1%2Fuploads%2FXmtOjW5FGJnHNn8W4K4Y%2FCleanShot%202025-09-17%20at%2011%E2%80%AF.58.02%402x.png?alt=media&amp;token=5627f948-8d92-4e04-84bc-80350cd6e128" 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.