Bootstrap now embraces color modes, introducing the much-awaited dark mode. With version 5.3 you have the flexibility to integrate a custom color mode switcher. Our support extends to both light mode (the default setting) and the newly introduced dark mode.
We developed a special Bootstrap Theme Switch component that you can add on your pages and allow users to switch between light, dark or auto mode.
We designed a pretty simple page, which includes a navbar, some text content and images. It uses the standard Bootstrap light theme:
Theme Manager Component
In order to allow the Bootstrap theme to be changed we need to add the Bootstrap Theme Manager component on our page.
Add a new component in the App Structure, select Theme Manager:
In the properties of this component you can select the default theme which needs to be set when the user loads your site. There are 3 options available:
- Auto - it loads the site theme automatically, based on the user OS theme settings. If the user is using a Dark UI theme, then it will load the Bootstrap Dark Theme. Otherwise it will load the default Light Theme.
- Light - loads the default Bootstrap Light Theme.
- Dark - loads the Bootstrap Dark Theme.
The Theme Manager component can be controlled via dynamic events, so you can create your own switch theme controls and switch the theme dynamically.
You can also use the theme set by the Theme Manager component in dynamic bindings. This is useful if you want to apply conditional styling or class toggle based on the theme set by the component.
We also created a very useful Theme Switcher component, which allows your users to switch the site theme.
Let’s add it in the navbar. We click the add new component button after the last navbar item:
And select Theme Switcher:
When the Theme Switcher is added on your page, you can select what icons type to be used with it. If you are using Font Awesome for your website, select Font Awesome. If you are using the Bootstrap Icons, then select this option in the dropdown:
Then from the Manager dropdown, select the Bootstrap Theme Manager component which we already added on the page:
And you are done. You can now easily switch the theme of your site, using the cool switcher component: