Using Bootstrap 5.3 Dark Mode

Docs Bootstrap 4 & 5 Visual Designer
#1

Intro

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.

Switch Themes

We designed a pretty simple page, which includes a navbar, some text content and images. It uses the standard Bootstrap light theme:

Screenshot_16
Screenshot_161614×960 405 KB

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:

Screenshot_9
Screenshot_91614×960 449 KB

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.

Screenshot_11
Screenshot_111614×960 340 KB

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.

Theme Switcher

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:

Screenshot_12
Screenshot_121614×960 397 KB

And select Theme Switcher:

Screenshot_13
Screenshot_131614×960 401 KB

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:

Screenshot_14
Screenshot_141614×960 400 KB

Then from the Manager dropdown, select the Bootstrap Theme Manager component which we already added on the page:

Screenshot_15
Screenshot_151614×960 400 KB

And you are done. You can now easily switch the theme of your site, using the cool switcher component:

theme-switch
theme-switch1603×957 7.23 MB

6 Likes
Bootstrap 5.3 Dark Mode switcher
Light and Dark mode using bootstrap - super easy guide 🌛
Wappler 6.0.0 RC 1 Released
Toogle Dark Mode
Curious about bootstrap 5.3 changes
Dark mode button - how does it work?
Bootstrap have now released a stable 5.3.0
Theme Manager - and uploading to remote sever
#2

This looks great. Can light and dark themes be customized (colours and fonts for example)? Or is it limited to the default Bootstrap light and dark themes?

#3

Wappler’s theme manager fully support and implement automatic dark theme generation based on the base colors for your theme. This is handled great by bootstrap.

The dark theme is fully automatically generated and there is no need for changes. And if you really want to change some settings you can always use the advanced options in the theme manager.

1 Like
#4

This works … but it looks like you actually have to manually add the ‘Theme Manager’ to every page. Just adding it to a headers include file doesn’t seem to work.

It’s kind of a pain to have to manually add it to every page. Especially in a large project.

PHP project …

#5

This is great! :smiley: