The Theme Mode Switcher widget is a button that switches the app theme between light mode and dark mode.
Every Experience Builder app or template has a theme, which is either a light theme or dark theme.
- Light themes generally use dark text and elements over light backgrounds. They are appropriate for viewing in bright daytime environments.
- Dark themes generally use light text and elements over dark backgrounds. They are appropriate for viewing in dim nighttime environments.
The Theme Mode Switcher widget allows you to switch between the original version and an opposite mode version of the app theme. If the app theme is a light theme, Experience Builder maps all of the theme elements to create a dark mode version. If the app theme is a dark theme, Experience Builder maps all of the theme elements to create a light mode version. Any changes you make to the app theme also affect the opposite mode version, but you cannot directly customize the opposite mode version.
Examples
Use this widget to support app design requirements such as the following:
- You want users to be able to switch to light mode or dark mode based on when and where they access your app.
- You want to offer a lighter version of your dark theme.
- You want to offer a darker version of your light theme.
Usage notes
To test the Theme Mode Switcher widget, you must preview the app in a new window or launch the published app. The widget does not switch theme modes in the builder environment.
Settings
The Theme Mode Switcher widget includes the following settings:
- Icon color—Choose a color for the widget icon.
- Icon size—Define the size of the widget icon in pixels (px).