# Custom Theme

## Basic usage

To customize the widgets, you need to specify a `theme` JSON object. However, this is optional; the UI comes with a default light theme. Create a new Appmixer instance with the `theme` option:

```javascript
const appmixer = new Appmixer({
    theme: {
        variables: {
            font: {
                family: “sans-serif”
            },
            colors: {
                neutral00: “orange”
            }
        }
    }
});
```

Or/and use the option with individual widgets:

```javascript
const flowManager = appmixer.ui.FlowManager({
    el: "#my-flow-manager",
    theme: {
        variables: {
            colors: {
                neutral00: 'purple'
            }
        }
    }
});
```

## Usage with multiple themes

If you wish to switch between themes, use the `set("theme")` method, this will re-render the UI:

```javascript
// change the theme of all widgets
appmixer.set('theme', {
    variables: {
        font: {
            family: 'serif'
        },
    }
})

// or/and change the theme of a single widget
widget.set('theme', {
    variables: {
        colors: {
            neutral00: 'green'
        }
    }
});
```

## Variables

Change the overall styling with a few global CSS properties. Here is a complete example with defaults:

```javascript
appmixer.set('theme', {
    variables: {
        font: {
            family: '\'SF Pro Text\', \'Helvetica Neue\', \'Helvetica\', \'Arial\', sans-serif',
            familyMono: '\'SF Mono\', \'ui-monospace\', Menlo, monospace',
            weightRegular: 400,
            weightMedium: 500,
            weightSemibold: 600,
            size: 14
        },
        colors: {
            base: '#FFFFFF',
            neutral: '#131314',
            focus: '#3688EB',
            error: '#DE3123',
            warning: '#B56C09',
            success: '#09CD96',
            modifier: '#C558CF',
            highlighter: '#FFA500'
        },
        shadows: {
            backdrop: 'rgba(0 0 0 / 6%)',
            popover: '0 3px 9px rgba(0 0 0 / 12%)',
            icon: '0 1px 3px rgb(0 0 0 / 6%)'
        },
        corners: {
            radiusSmall: '3px',
            radiusMedium: '6px',
            radiusLarge: '9px'
        },
        dividers: {
            regular: '1px',
            medium: '2px',
            semibold: '3px',
            bold: '6px',
            extrabold: '9px'
        }
    }
})
```

#### Colors

The numbers in the names of colors refer to a foreground opacity of the color over the base background color:

* `neutral96` is a foreground color with 96% opacity over the background `neutral00`.
* Some colors need a negative color `NG` on top. For example, a white text on a blue button.

#### Font

The numbers in size of the font refer to the defaults in pixels: `size13` variable default is 13px.

## Shapes

Shapes of connectors in diagrams are customizable by choosing a preset in your theme.

```javascript
appmixer.set('theme', {
    ui: {
        shapes: {
            action: "action",
            trigger: "trigger",
            selection: "selection"
        }
    }
})
```

Change the values of the entries to switch between presets. Here are built-ins per shape type:

<table data-header-hidden><thead><tr><th width="161.2032967032967"></th><th></th><th width="175"></th><th></th></tr></thead><tbody><tr><td><code>action</code></td><td><code>action-vertical</code></td><td><code>action-dark</code></td><td><code>action-vertical-dark</code></td></tr><tr><td><code>trigger</code></td><td><code>trigger-vertical</code></td><td><code>trigger-dark</code></td><td><code>trigger-vertical-dark</code></td></tr><tr><td><code>selection</code></td><td><code>selection-vertical</code></td><td><code>selection-dark</code></td><td><code>selection-vertical-dark</code></td></tr></tbody></table>

Use [Custom Shapes](https://docs.appmixer.com/6.0/5.2/customizing-ui/custom-component-shapes) to create new presets or override the defaults.

## Charts

Charts are customizable by a unique set of non-CSS properties. The values default to the current theme variables, except for `colorway`. The `colorway` option specifies the dynamic colors automatically picked by charts.

```javascript
appmixer.set('theme', {
    ui: {
        charts: {
            legendFontSize: 12px,
            legendFontFamily: "sans-serif",
            legendFontColor: "black",
            tickFontSize: "black",
            tickFontFamily: "monospaced",
            tickFontColor: "black",
            gridColor: "lightgray",
            colorway: [
                '#1452cc',
                '#8a47c4',
                '#c636b0',
                '#ef2c94',
                '#ff3d74',
                '#ff5e52',
                '#ff8230',
                '#ffa600'
            ]
        }
    }
})
```

## Selectors

The theme JSON object references the entire Appmixer SDK UI in a complex tree of selectors. Elements use a hash symbol (`#`) prefix and dynamic states use the at sign (`@`). Each branch in the tree may hold nested selectors and any valid CSS properties for the element. The selectors are available for advanced customizations, but the structure may change between the Appmixer versions.

```javascript
appmixer.ui.FlowManager({
    el: '#app',
    theme: {
        ui: {
            '#FlowManager': {
                background: 'lightblue',
                '#header': {
                    padding: '0 0 24px 0',
                    '#buttonCreateFlow': {
                        color: 'yellow',
                        '@hovered': {
                            color: 'white'
                        }
                    }
                }
            }
        }
    }
});
```

## 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:

```bash
wget  https://my.appmixer.com/appmixer/package/theme-light.json
wget  https://my.appmixer.com/appmixer/package/theme-dark.json
```

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

![FlowManager Dark Theme](https://4257661311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpyTqJi517UiwFJJRydZ%2Fuploads%2Fgit-blob-15a66fe19fff8bf9fdff5f154c3f886ff016047d%2Fimage%20\(48\).png?alt=media)

![Designer Dark Theme](https://4257661311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpyTqJi517UiwFJJRydZ%2Fuploads%2Fgit-blob-1a72155319288155d7e4aa128d0018c80032a629%2Fimage%20\(13\).png?alt=media)

![Insights Logs Dark Theme](https://4257661311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpyTqJi517UiwFJJRydZ%2Fuploads%2Fgit-blob-137e8093b883d62b315eed0494a88658584255fc%2Fimage%20\(23\).png?alt=media)

![Insights Chart Editor](https://4257661311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpyTqJi517UiwFJJRydZ%2Fuploads%2Fgit-blob-9e6de6fa2f2004436f5fe669d7a2d547268b1ab7%2Fimage%20\(35\).png?alt=media)