ArianaTheme
Theme of the viewer and designer UI. Every value is optional and maps to a
CSS custom property on the component’s root element, so you can also set
the variables in your own CSS (.ar-root { --ar-primary: … }).
| property | CSS variable | used for |
|---|---|---|
primary |
--ar-primary |
selection, focus, active buttons |
onPrimary |
--ar-on-primary |
text on primary backgrounds |
background |
--ar-bg |
workspace behind pages and panels |
surface |
--ar-surface |
toolbars and panels |
surfaceVariant |
--ar-surface-2 |
section headers, hover backgrounds |
inputBackground |
--ar-input-bg |
inputs and selects |
border |
--ar-border |
dividers and input borders |
text |
--ar-text |
text |
textMuted |
--ar-muted |
labels and hints |
danger |
--ar-danger |
errors and delete buttons |
radius |
--ar-radius |
corner radius of controls |
fontFamily |
--ar-font |
UI font |
fontSize |
--ar-font-size |
base UI font size |
bandColor |
--ar-band-color |
default band caption color (design) |