Change theme from the app

With UI Bakery, you can build an app where users can change themes right inside of it, e.g. switching Light and Dark themes:

Day/night mode

Theme editor is available on Business and Enterprise plans.

Theme switcher with a select component

To implement the theme switcher with a select component, follow the below steps:

1. Add a dark theme:

Light and Dark themes

2. Add a Select component with Options {{app.themes}}, Option title name and Option value id (you can use other components as well for switching themes):

themeSelect settings

3. Add an action changeTheme with 2 steps:

1st step is a Javascript Code action with the following code: {{app.setTheme(data)}}; return {{data}};

Javascript code step for setting theme

2nd step is a Save to Local Storage action by userTheme variable:

Saving selected theme to local storage with userTheme variable

4. Assign the changeTheme action to thethemeSelect component's On Change trigger:

Define On Change trigger

5. Set a value of themeSelect component to {{localStorage.userTheme || 'DEFAULT_THEME'}}, where 'DEFAULT_THEME' is the id of a Light theme (pre-built):

Define value of themeSelect

6. Add one more action initTheme, which triggers the changeTheme event with the parameters from step 5:

initTheme action

7. Finally, assign your action initTheme to the application On Page Load trigger:

Define On Page Load trigger

That's it, now your users are available to change the theme directly from the app.

Theme switcher with an icon component

To implement the theme switcher with an icon component, follow the below steps:

1. Add a dark theme.

2. Add 2 icon components and style them to represent a light and a dark mode (e.g. a sun and a moon).

3. Find the On Click trigger of the icon that corresponds to the light theme, and add a new changeTheme action:

1st step: a Save to Local Storage action type. Choose the theme variable in the list and leave the New value field as {{data}}.

2nd step: JavaScript code action type. Specify the code: {{app.setTheme(data)}};

4. Next, let's assign the light theme to the corresponding icon. Click the icon that corresponds to the light theme, find the Triggers tab, and open the Action Arguments field.

5. Open the App Structure in the left menu, and find the themes variable under the app tab. Copy the id of the light theme:

6. Go back to the Action Arguments and paste the id:

7. Now, choose the moon icon corresponding to the dark theme, assign the changeTheme action to its On Click trigger, and paste the id of the dark theme into the Action Arguments field:

8. Now, find the On App load trigger and add a new initTheme action. Select the JavaScript code action type and specify the code: {{app.setTheme(localStorage.theme || 'DEFAULT_THEME')}};, where 'DEFAULT_THEME' is the id of the light theme.

9. You can additionally configure the color of the icon to be changed when used. Click the sun icon representing the light theme, switch the Color field into JS mode, and specify the code: {{localStorage.theme == 'DEFAULT_THEME' ? 'warning': 'white'}}, where DEFAULT_THEME is the id of the light theme.

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