Changing theme from the app

Theme editor is available on Business and Enterprise plans.

With UI Bakery, you can build an app in which users can change themes right from it, for example switch between Light and Dark themes. In this article, we'll explore how you can make a theme switcher with a Select component and an Icon component. Let's dive in!

Theme switcher with the Select component

To implement it, follow the steps below:

1. First, create a new theme for the Dark mode.

Go back to this article if you need a reminder how to create and customize a theme.

1. Next, add a Select component to the working area and specify the following settings in the right side panel:

   1. For the Options field - {{app.themes}}

   2. For the Option title - select name

   3. For the Option value - select id

2. Create a changeTheme action that will consist of two steps:

   1. 1st step - JavaScript Code action with the {{app.setTheme(data)}} return {{data}}; code

   2. 2nd step - Save to Local Storage action with the userTheme variable (set its value as {{data}})

3. Assign the changeTheme action to the Select component's On Change trigger.

4. In the Select component's Value field, specify {{localStorage.userTheme || 'DEFAULT_THEME'}} , where 'DEFAULT_THEME' is the id of the Light theme (pre-built).

5. Create another action (we'll call it initTheme) of the Execute Action type that will trigger the changeTheme event with the parameters from step 5: return {{localStorage.userTheme}} || 'DEFAULT_THEME'

6. Finally, assign the initTheme action to the application's On Page Load trigger.

Voilà! Now your users will be able to change the theme directly from the app.

Theme switcher with the Icon component

To implement it, follow the steps below:

1. First, create a new theme for the Dark mode.

Go back to this article if you need a reminder how to create and customize a theme.

1. Next, add two Icon components to the working area and style them to represent Light and Dark modes (for example, the sun and the moon).

2. For the On Click trigger of the icon that corresponds to the Light theme, create a new switchTheme action that will consist of two steps:

   1. 1st step - Save to Local Storage action with the theme variable (set its value as {{data}})

   2. 2nd step - JavaScript Code action with the {{app.setTheme(data)}}; code

3. Next, let's assign the Light theme to the corresponding icon - click the icon, navigate to the Triggers section, and open the Action Arguments field.

4. Open the App state tab in the left side panel, and find the themes' variable under the app tab.

5. Copy the id of the Light theme (for example, 'DEFAULT THEME') and paste it in the Action Arguments field.

1. Now, repeat the same for the moon icon corresponding to the Dark theme - assign the switchTheme action to its On Click trigger, and paste the id of the Dark theme (for example, 'zHYzWbg3HH') into its Action Arguments field.

2. Now, for the app's On App Load trigger, create a new loadTheme action of the JavaScript Code type and specify the following code: {{app.setTheme(localStorage.theme || 'DEFAULT_THEME')}};, where 'DEFAULT_THEME' is the id of the Light theme (pre-built).

3. (Optional) Configure the color of the icon to be changed when used:

   1. Click the sun icon representing the Light theme, switch the Color field into JS mode, and specify the following code: {{localStorage.theme == 'DEFAULT_THEME' ? 'warning': 'white'}}, where DEFAULT_THEME is the id of the Light theme.

   2. Click the moon icon representing the Dark theme, switch the Color field into JS mode, and specify the following code: {{localStorage.theme !== 'DEFAULT_THEME' ? 'warning': 'black'}}

That's it! Now users will be able to click on the icons to switch between Light and Dark modes, and the colors of the icons will also change.