Custom Theme

Customize UI widgets. You can change the colors, the typography, and much more.

Basic usage

To customize the UI widgets, you need to specify a theme JSON object either in the Appmixer constructor:

const appmixer = new Appmixer({
    theme: {
        variables: {
            font: {
                family: "sans-serif"
            },
            colors: {
                neutral: "orange"
            }
        }
    }
});

and/or use the option with individual widgets:

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

Usage with multiple themes

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

// 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: {
            neutral: 'green'
        }
    }
});

Variables

The easiest way to change the overall styling is to use the theme variables. The following example shows a complete list of variables that you can set in your theme to match your product branding:

appmixer.set('theme', {
    mode: 'light', // Determines the color mode of the theme: 'light' or 'dark'.
    variables: {
        // Font variables including font family, weights, and size.
        font: {
            family: '\'SF Pro Text\', \'Helvetica Neue\', \'Helvetica\', \'Arial\', sans-serif',
            familyMono: '\'SF Mono\', \'ui-monospace\', Menlo, monospace',
            weightRegular: 400,
            weightMedium: 500,
            weightSemibold: 600,
            weightBold: 700, // Added key for bold font weight.
            size: 14
        },
        // Color variables for various UI elements, with light and dark mode defaults.
        colors: {
            background: '#FFFFFF', // Color of the background. The areas accomodate surfaces.
            surface: '#FFFFFF', // Color of the surfaces above background and other surfaces.
            separator: '#E0E0E2', // Separator is a special color for various borders and lines.
            neutral: '#1F2338',
            primary: '#2A64F6', // Colors for primary, secondary and tertiary actions of the user.
            secondary: '#6B7EB3',
            tertiary: '#8C6C87',
            error: '#B3261E',
            warning: '#B56C09',
            success: '#08B685',
            modifier: '#C558CF', // Special color for variables that have been modified via Modifiers.
            highlighter: '#FFA500'
        },
        // Shadow variables for different elevation levels and UI elements.
        shadows: {
            level0: '0 0 4px 0 rgba(60, 64, 67, 0.3)', // Shadows from level 0 to 5 serve to assist with elevation levels between surfaces.
            level1: '0 0 1px rgb(125 125 126)',
            level2: '0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.12)',
            level3: '0 2px 4px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 1px rgba(60, 64, 67, 0.12)',
            level4: '0 3px 9px 0 rgba(60, 64, 67, 0.15), 0 3px 12px 1px rgba(60, 64, 67, 0.12)',
            level5: '0 4px 8px 0 rgba(60, 64, 67, 0.3), 0 4px 12px 1px rgba(60, 64, 67, 0.12)',
            backdrop: 'rgba(0 0 0 / 88%)', // Backdrop is a special shadow to cover the background of modals and popups.
            blur: 'rgba(0 0 0 / 10%)', // Blur is an alternative for "backdrop" when the background is blurred instead.
            popover: '0 3px 9px rgba(0 0 0 / 12%)', // Popover is a special shadow for popups that should be at the maximum elevation.
            icon: '0 1px 3px rgb(0 0 0 / 6%)'
        },
        // Radius variables for element and container corners.
        corners: {
            elementRadiusSmall: '3px',
            elementRadiusMedium: '6px',
            elementRadiusLarge: '9px',
            elementRadiusRound: '300px',
            containerRadiusSmall: '3px',
            containerRadiusMedium: '6px',
            containerRadiusLarge: '9px'
        },
        // Border width variables for UI elements.
        dividers: {
            regular: '1px', // Width of border lines and separator lines in the UI.
            medium: '2px',
            semibold: '3px',
            bold: '6px',
            extrabold: '9px'
        }
    }
})

Shapes

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

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:

The -vertical presets select the top-to-bottom layout, which keeps the Designer on the previous diagram — the new diagram supports left-to-right layouts only. See Designer → Diagram.

action	action-vertical	action-dark	action-vertical-dark
trigger	trigger-vertical	trigger-dark	trigger-vertical-dark
selection	selection-vertical	selection-dark	selection-vertical-dark

action/trigger

action-vertical/trigger-vertical

action-dark/trigger-dark

Special version of actions and triggers that works better on dark backgrounds.

action-vertical-dark/trigger-vertical-dark

Special version of vertical actions and triggers that works better on dark backgrounds.

Advanced UI Styling

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.

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

While the advanced theme styling gives you the most flexibility in customizing Appmixer UIs, we cannot guarantee that in some cases, the structure and nesting of the selectors might change between Appmixer versions. It is therefore recommended to use theme.variables instead.

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.

Scrollbars

Appmixer widgets render thin, theme-coloured scrollbars instead of the browser's native ones. The difference is most visible on Windows, where native scrollbars are wide and grey. The thumb colour comes from the theme's scrollbarColor property and defaults to neutral32 over a transparent track — it is derived from the palette, so a custom theme adapts automatically.

Because scrollbar-color is an inherited CSS property, it is set on the root that anchors each part of the UI. There are three such roots, and a theme that overrides only some of them leaves the rest unthemed:

Theme path	Applies to
ui.mixins['#container'].scrollbarColor	Scrollable areas inside a normal widget.
ui.mixins['#widgetModal'].scrollbarColor	Widgets rendered inside a modal, which have no #container ancestor.
ui['#scrollbars'].scrollbarColor	Overlays teleported to document.body — modals, popovers, the Automation Hub dialog, the flow logs popover and the field editor overlay.

The third one is a top-level scope, not a mixin: teleported overlays render outside the widget subtree, so neither mixin can reach them.

appmixer.set('theme', {
    ui: {
        '#scrollbars': {
            scrollbarColor: 'rgba(0, 0, 0, 0.4) transparent'
        },
        mixins: {
            '#container': {
                scrollbarColor: 'rgba(0, 0, 0, 0.4) transparent'
            },
            '#widgetModal': {
                scrollbarColor: 'rgba(0, 0, 0, 0.4) transparent'
            }
        }
    }
});

The colour can also be set per widget, for example under '#Designer'. Setting scrollbarColor: 'auto' restores the browser's native thumb colour, and the native width can be restored from the host page:

.am-widget * { scrollbar-width: auto; }

If your host application styles ::-webkit-scrollbar inside Appmixer widgets, those rules no longer apply in Chromium. Setting the standard scrollbar-width / scrollbar-color properties switches Chrome and Edge to the standard scrollbar rendering path, where the ::-webkit-scrollbar pseudo-elements are ignored. Migrate such styling to the standard properties, or neutralise the SDK defaults as shown above. Safari before 18.2 still renders native scrollbars.

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:

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

Designer Dark Theme

Insights Logs Dark Theme