# Custom Theme

## Setting a Custom Theme

A theme is represented as a JSON object that you set on your Appmixer SDK instance using the `set('theme', myTheme)`method:

```javascript
var appmixer = new Appmixer({ baseUrl: BASE_URL });
appmixer.set('theme', THEME);
```

{% hint style="info" %}
 You can set the theme anywhere in your application but usually you'll do that right after initializing your appmixer instance. Note that you can even set the theme multiple times with different configuration in which case the Appmixer SDK will automatically re-render all the UI widgets using the new theme configuration.
{% endhint %}

If you don't set a theme, the default theme will be applied.

## Structure of the Theme Object

The theme object is a JSON object that contains references to various UI elements and their CSS-like properties. Each UI element is named and prefixed with the `$` character. UI elements can have different states each having a different styling (e.g. disabled, hovered, ...). States are prefixed with the `@` character. All other keys in the theme object are CSS-like properties that you can assign CSS values. Properties are inherited in the hierarchical structure of the UI elements. For example, setting a blue text color on the entire FlowManager (`$flowManager`) will make all the text within the nested UI elements of FlowManager (e.g. pagination) blue as well unless the text color is overwritten in that nested UI element.

Example of a theme object:

```javascript
appmixer.set('theme', {
    $flowManager: {
        backgroundColor: 'lightgray',
        color: 'blue',
        $header: {
            $btnCreateFlow: {
                '@hover': {
                    backgroundColor: 'black',
                    color: 'white'
                }
            }
        },
        $thumbnails: {
            spacing: '15px',
            $flow: {
                color: 'white'
            }
        }
    }
});
```

The theme object above produces the following result in the FlowManager widget:

![](/files/-LtAzpevRLzHgzMjkKzD)

And here's how the default styling looked like before we applied our custom theme:

![](/files/-LtB-qfoZNfvdKFpHjNv)

## Complete Theme Object

For reference, we prepared a dark theme for all the Appmixer UI widgets that you can use as a quick overview of all the UI elements that you can set your custom theme for:

{% file src="/files/-MbvnwtqGPrvXlNf27nB" %}

Screenshots of the dark theme for some of the UI widgets:

![FlowManager Dark Theme](/files/-LtB50co5_IdusoqiTBc)

![Designer Dark Theme](/files/-LtB5YxKvoaXxvEkYEbI)

![Insights Logs Dark Theme](/files/-LtB6QxJ4i_uNuCrn51M)

![Insights Chart Editor](/files/-LtB6ee1vCRtxR5lYXhD)


---

# 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.appmixer.com/6.0/v4.3/customizing-ui/custom-theme.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.