Dark Mode | Axero Documentation

Note: The DarkModeEnabled System Property must be set to true in the Control Panel before you can enable dark mode in preferences.

Search for "darkmode".

Set the value to true.

If Dark Mode is enabled each user can turn it on in their preferences:

Dark mode is also available for the mobile layout. It can be enabled by:

1. Open up settings:

2. Click on Dark Mode and choose which setting to change to:

Page Builder pages for mobile also have a class that specify the element be a certain theme, either theme-light or theme-dark. For example, if you want icons in navigation pills to be black, but white in dark mode, you can add this to a RawHTML widget:

<style>
.axero-pills .x-icon i { color: black; }
.theme-dark .axero-pills .x-icon i { color: white; }
</style>