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.

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.

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.