Custom Theme

Appmixer SDK allows you to completely change the look&feel of all the UI widgets it provides (Designer, FlowManager, Insights, ...).

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:

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

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.

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:

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:

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

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:

113KB

dark-theme.json

Appmixer Dark Theme

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

FlowManager Dark Theme

Designer Dark Theme

Insights Logs Dark Theme

Insights Chart Editor