Themes & Tokens
Every Easy UI component is driven by one design-token set. A theme is therefore just a token file – swap it out and the entire UI changes its look, without touching a single markup element.
The token set
The tokens live in Assets/EasyUI/Themes/EasyUI.Tokens.uss and cascade down from the
.eui-root element. In component styles, use only these tokens – never fixed hex or pixel values.
| Group | Tokens |
|---|---|
| Color | --eui-color-primary, -primary-hover, -on-primary, -danger, -danger-hover, -surface, -text, -muted, -border |
| Spacing | --eui-space-1, -2, -3, -4, -6 |
| Radius | --eui-radius-sm, -md, -lg |
| Font size | --eui-font-size-sm, -md, -lg, -title |
.eui-root {
--eui-color-primary: #6366F1;
--eui-color-surface: #14101f;
--eui-space-3: 12px;
--eui-radius-md: 12px;
--eui-font-size-title: 22px;
}Bundled themes
Seven ready-made themes are included – each is just a token file:
| Theme | File |
|---|---|
| Minimal Dark (default) | EasyUI.Tokens.uss |
| Sci-Fi Neon | EasyUI.Theme.SciFi.uss |
| Fantasy | EasyUI.Theme.Fantasy.uss |
| Light | EasyUI.Theme.Light.uss |
| Retro Arcade | EasyUI.Theme.Retro.uss |
| Neon Cyberpunk | EasyUI.Theme.Neon.uss |
| Soft Pastel | EasyUI.Theme.Pastel.uss |
Building your own theme
- Duplicate
EasyUI.Tokens.uss. - Keep the
.eui-rootselector, adjust the values. - Load your new file instead of the default token stylesheet – no markup changes.
A theme only overrides token values. Keep all token names; don't remove any – otherwise components fall back to undefined values.
Live theme editor
Under Easy UI ▸ Theme Editor you can adjust the tokens with a live preview
(color fields, sliders) and export them as .uss. This lets you create new themes without writing USS by hand.
Binding shapes to the theme
EuiShape, EuiRadialProgress, EuiRadialMenu and EuiSpinner
can pull their colors from the theme. Instead of literal colors, set a *-token attribute to a token name:
<eui:EuiShape style="width:170px; height:110px;"
fill-token="primary" border-token="border" corner-radius="20" />Available color tokens: primary, primary-hover, on-primary, danger,
danger-hover, surface, text, muted, border.
For *-token bindings to take effect, the shape must sit under an <eui:EuiRoot>
(C#: UI.Root()) with a loaded token stylesheet – EuiRoot reads the tokens and passes them down to the shapes.
