Total includes a custom dark mode functionality built-in that allows you to have a light and dark version of your site. This functionality is disabled by default because it requires added scripts and it’s not something needed for most sites. To enable go to the Theme Panel, locate the Dark Mode setting and turn it on.
How Does Dark Mode Work?
The Total theme has been coded to use a Color Scheme which provides consistent and easy to modify colors across the whole site. This color scheme is light by default but includes a dark variation. Thus, if you enable Dark Mode, when the site is set to display in dark mode it will use the dark variation of the color scheme.
Creating a Site that Works with Dark Mode
If you are not changing any of the default theme colors or using custom colors anywhere on the site (customizer, builder elements, Gutenberg) than you don’t have to do anything but enable the functionality. If you plan on modifying the default theme colors or adding your own custom colors to your site, then you will need to first define a custom color palette for use on your site.
When adding your color palette and you’ve enabled Dark mode, you will have the ability to assign your default (light) and dark color as such:
For your dark mode to function correctly you need to:
- Enable Dark Mode in the Theme Panel
- Not change or use any custom colors OR:
- Define your custom colors via Theme Panel > Color Palette.
- Use these custom colors anywhere you define a custom color (customizer, elements).
Light is the Default Mode
The default mode of the theme is always light. If you want a light/dark functionality for your site, whenever you are setting up and customizing your website you should always keep this in mind. If you want your site to be dark by default you could technically make your default colors dark and then have the dark mode colors be light – this is perfectly, fine but it’s a bit weird and not recommended.
The whole purpose of a website that offers a dark mode is to display the site using the user’s preferred mode – whether you want the site to be dark or light by default is irrelevant. So, it’s best to stick with how the theme is built, which is that the default design is light.