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:
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:
Add a dark theme:
Add a Select component with Options
{{app.themes}}
, Option titlename
and Option valueid
(you can use other components as well for switching themes):
Add an action
changeTheme
with 2 steps:
1st step is a Javascript Code action with the following code: {{app.setTheme(data)}}; return {{data}};
2nd step is a Save to Local Storage action by userTheme
variable:
Assign the
changeTheme
action to thethemeSelect
component'sOn Change
trigger:
Set a value of
themeSelect
component to{{localStorage.userTheme || 'DEFAULT_THEME'}}
, where'DEFAULT_THEME'
is the id of a Light theme (pre-built):
Add one more action
initTheme
, which triggers thechangeTheme
event with the parameters from step 5:
Finally, assign your action
initTheme
to the applicationOn 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:
Add a dark theme.
Add 2 icon components and style them to represent a light and a dark mode (e.g. a sun and a moon).
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)}};
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.
Open the App Structure in the left menu, and find the themes variable under the app tab. Copy the id of the light theme:
Go back to the Action Arguments and paste the id:
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:
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.
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'}}
, whereDEFAULT_THEME
is the id of the light theme.
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'}}
Last updated