# 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 websites on the following three colours, **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 c**olours we recommend using the **Text** colour from the Theme Studio.

### Changing Colours based on Mode

Every colour in Elements supports Dark and Light Mode, this means you can change the colour of text, backgrounds, buttons, borders, and more, all based on the users system settings.

By default when you set a colour it's set for Light Mode. To set an alternative colour for Dark mode, you need to press the Dark/Light Mode toggle button at the top of the editor.

### Page Background Colour

The colour for your website background can be set for both Light and Dark mode in the Theme Studio under Page. You can also override the colour on a per page basis by 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&#x26;token=7f2b2265-2781-4d2f-8220-d3877440a0f9" alt=""><figcaption></figcaption></figure>

### Disabling Dark Mode

If you don't want dark mode on your website, you can switch this off in the Project Settings. Please note, this will hide the UI option to toggle between dark and light mode, and only preview and export the light mode 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&#x26;token=5627f948-8d92-4e04-84bc-80350cd6e128" alt=""><figcaption></figcaption></figure>


---

# 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.realmacsoftware.com/elements-docs/elements/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.