Skip to content

Config: UI Theme ui-theme

Each page can be assigned a theme, which will be used to render the page. The theme is a collection of colors that control the look and feel of the widgets.


SurfaceControls the color of the navigation and side menus
PrimaryAny interactive element is styled with this color, including buttons, sliders and focus state of input fields.
Pages - BackgroundThe background color of the full page
Groups - BackgroundThe background color of any groups rendered on the page
Groups - OutlineThe color of the border of any groups rendered on the page


Page PaddingThe spacing that surrounds all of the groups on a page. Applicable for Grid & Fixed layouts and Notebook layouts where the screen width is narrower than 1024px.

You can define the padding for each side of the page separately by using CSS Shorthand notation
Group GapThe gap between each group in a layout. Default: 12px
Group Border RadiusThe border radius of the surrunding of each group on a page. Default: 4px
Widget GapThe gap between each widget within a group. Default: 12px


Example Config of ui-theme in Node-RED:

Example config for a Theme

Resulting Dashboard with the theme applied:

Resulting Dashboard with applied theme

Colors here were chosen to make it easier to differentiate between the different groups rather than it being aesthetically pleasing.