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:

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

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:

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