Skip to content

ui-theme.md

Latest commit

 

History

History
67 lines (43 loc) · 3.88 KB

ui-theme.md

File metadata and controls

67 lines (43 loc) · 3.88 KB
Raw
description Customize the look and feel of your dashboard with UI themes in FlowFuse Dashboard.
colors
Surface Primary Pages - Background Groups - Background Groups - Outline
Controls the color of the header and navigation side menus
Any interactive element is styled with this color, including buttons, sliders and focus state of input fields.
The background color of the full page
The background color of any groups rendered on the page
The color of the border of any groups rendered on the page
sizes
Row Height Page Padding Group Gap Group Border Radius Widget Gap
How tall a single row (unit of height) should render in the Dashboard. Options here are Default (48px), Comfortable (38px) and Compact (32px).
The 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.</br></br>You can define the padding for each side of the page separately by using <a href="https://www.w3schools.com/css/css_padding.asp#:~:text=Padding%20%2D%20Shorthand%20Property" target="_blank">CSS Shorthand notation</a>
The gap between each group in a layout. Default: 12px
The border radius of the surrounding of each group on a page. Default: 4px
The gap between each widget within a group. Default: 12px
<script setup> </script>

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.

Presets

Dashboard ships with five built-in presets: Light, Dark, Dracula, Nord, and Sepia. A preset fills in all five colors and the sizes in one step, giving you a complete color scheme without setting each value individually.

The Preset dropdown in a ui-theme node

  • Pick a preset: open a ui-theme node and choose from the Preset dropdown. Every color updates at once.
  • Customize: change any individual color and the dropdown switches to Custom, keeping the rest of the scheme intact. Adjusting sizes does not change the preset.
  • Set the default for new themes: in the Dashboard sidebar, the Theme preset control next to + Theme sets which preset new themes start from. New dashboards start on Light.

Dark themes

When a theme's page background is dark, the dashboard automatically adapts its supporting elements — input fields, borders, charts, and gauges — so nothing sits light against a dark background. This is driven by the page background color, so it applies to any dark theme you build, not only the built-in dark presets.

The bundled presets were chosen to meet WCAG AA contrast for text and icons.

Colors

Sizes

Examples

Modified Colours & Spacing

Example Config of ui-theme in Node-RED:

Example config for a Theme

Resulting Dashboard with the theme applied:

Resulting Dashboard with applied theme{data-zoomable}

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

Row Height

Default (Left), Comfortable (Middle), Compact (Right) row height comparisons for a UI Table element{data-zoomable} Default (Left), Comfortable (Middle), Compact (Right) row height comparisons for a UI Table element

The Row Height controls how tall a single row (unit of height) should render in the Dashboard. Options here are Default (48px), Comfortable (38px) and Compact (32px).