Wappler - Theme Changer

This App Connect extension creates a dropdown menu to select the colour mode (light or dark) for your project. It starts in Dark mode. Once a colour mode has ben selected, it will place your selection in Local Storage. Each time the application is opened, it will select the colour mode from the local storage.

Please note that Bootstrap 5.3+ is required.

If you are using Wappler 5 or Wappler 6 beta, then you will need to activate the Beta Channel. Follow the steps below.

1. Open the Options panel (the second last icon on the left bottom).
2. Select System (left bottom).
3. For the Extensions Update Channel, select Beta in the dropdown.
4. Save the change.

Installation

1. Open your Project Settings.
2. Go to the Extensions.
3. Click on Add extension
4. Enter @benpley/wappler-theme-changer.
5. Click save.
6. Click save again. This step will install the extension.

Usage

The Theme Changer dropdown can be placed anywhere in your document.

1. In the App Structure panel, right-click the element where you want to add the component.
2. Select Components and add the Theme Changer.

The inserted component will look something like:

<dmx-theme-changer id="changer1"></dmx-theme-changer>

License

MIT