Customize UI widgets. You can change the colors, the typography, and much more.
To customize the UI widgets, you need to specify a theme JSON object either in the Appmixer constructor:
and/or use the option with individual widgets:
If you wish to switch between themes, use the set("theme") method, this will automatically re-render the UI applying your new theme:
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:
Shapes of connectors in diagrams are customizable by choosing a preset in your theme.
Change the values of the entries to switch between presets. Here are built-ins per shape type:
Special version of actions and triggers that works better on dark backgrounds.
Special version of vertical actions and triggers that works better on dark backgrounds.
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.
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.
The numbers in size of the font refer to the defaults in pixels: size13 variable default is 13px.
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: