Dark Mode

Automatic colour switching based on the users 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.

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 colours 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.

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.