Themes & Tokens
Alle Easy-UI-Komponenten werden von einem Design-Token-Set gesteuert. Ein Theme ist damit nur eine Token-Datei – tausche sie aus und die komplette UI ändert ihr Aussehen, ohne dass ein einziges Markup-Element angefasst wird.
Das Token-Set
Die Tokens leben in Assets/EasyUI/Themes/EasyUI.Tokens.uss und kaskadieren ab dem
.eui-root-Element. Verwende in Komponenten-Styles ausschließlich diese Tokens – nie feste Hex- oder Pixelwerte.
| Gruppe | Tokens |
|---|---|
| Farbe | --eui-color-primary, -primary-hover, -on-primary, -danger, -danger-hover, -surface, -text, -muted, -border |
| Abstand | --eui-space-1, -2, -3, -4, -6 |
| Radius | --eui-radius-sm, -md, -lg |
| Schriftgröße | --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;
}Mitgelieferte Themes
Sieben fertige Themes liegen bei – jedes ist nur eine Token-Datei:
| Theme | Datei |
|---|---|
| Minimal Dark (Standard) | 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 |
Ein eigenes Theme bauen
EasyUI.Tokens.ussduplizieren.- Den Selektor
.eui-rootbehalten, die Werte anpassen. - Statt des Standard-Token-Stylesheets dein neues laden – kein Markup ändert sich.
Ein Theme überschreibt nur Token-Werte. Behalte alle Token-Namen bei; entferne keine – sonst fallen Komponenten auf undefinierte Werte zurück.
Live-Theme-Editor
Unter Easy UI ▸ Theme Editor lassen sich die Tokens mit Sofort-Vorschau anpassen
(Farbfelder, Slider) und als .uss exportieren. So entstehen neue Themes ohne manuelles USS-Schreiben.
Shapes an das Theme binden
EuiShape, EuiRadialProgress, EuiRadialMenu und EuiSpinner
können ihre Farben aus dem Theme ziehen. Statt Literalfarben ein *-token-Attribut mit einem Token-Namen setzen:
<eui:EuiShape style="width:170px; height:110px;"
fill-token="primary" border-token="border" corner-radius="20" />Verfügbare Farb-Tokens: primary, primary-hover, on-primary, danger,
danger-hover, surface, text, muted, border.
Damit *-token-Bindungen greifen, muss die Shape unter einem <eui:EuiRoot>
(C#: UI.Root()) mit geladenem Token-Stylesheet liegen – EuiRoot liest die Tokens und reicht sie an die Shapes weiter.
