# Changing theme from the app

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.

{% hint style="success" %}
Go back to [this article](/concepts/theme-editor.md#creating-a-new-theme) if you need a reminder how to create and customize a theme.
{% endhint %}

2. 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*
3. 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}}`)
4. Assign the *changeTheme* action to the Select component's **On Change** trigger.
5. In the Select component's **Value** field, specify `{{localStorage.userTheme || 'DEFAULT_THEME'}}` , where `'DEFAULT_THEME'` is the id of the *Light* theme (pre-built).
6. 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'`
7. 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.

{% @arcade/embed flowId="oMQfBHXKt6PNf3r3qrYO" url="<https://app.arcade.software/share/oMQfBHXKt6PNf3r3qrYO>" %}

## Theme switcher with the Icon component

To implement it, follow the steps below:

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

{% hint style="success" %}
Go back to [this article](/concepts/theme-editor.md#creating-a-new-theme) if you need a reminder how to create and customize a theme.
{% endhint %}

2. 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).
3. 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
4. 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.
5. Open the **App state** tab in the left side panel, and find the themes' variable under the **app** tab.
6. Copy the **id** of the *Light* theme (for example, *'DEFAULT THEME*') and paste it in the **Action Arguments** field.&#x20;

{% @arcade/embed flowId="crmFZ08O9ll1mQsv7VVq" url="<https://app.arcade.software/share/crmFZ08O9ll1mQsv7VVq>" %}

7. 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.
8. 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).
9. (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.

{% @arcade/embed flowId="Wx0F0YZHH7ffoUAQG4Pe" url="<https://app.arcade.software/share/Wx0F0YZHH7ffoUAQG4Pe>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uibakery.io/concepts/theme-editor/change-theme-from-the-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.