Panels · Guides
Theming
Themes are CSS tokens: shadcn's colour names, plus a radius and the panel glass.
The components use shadcn's token names, so they follow whatever theme your project already has. A theme is a block of CSS custom properties; set it on :root, or on any element with data-theme to scope it there.
Ember
muted text
primaryaccent
Nynxz
muted text
primaryaccent
Midnight
muted text
primaryaccent
Forest
muted text
primaryaccent
Lotus
muted text
primaryaccent
Paper
muted text
primaryaccent
Tokens
| Token | Used for |
|---|---|
--background, --foreground | window surfaces and text |
--muted, --muted-foreground | title bars, secondary text |
--accent, --accent-foreground | hover and active fills |
--primary | the focused window's rule, active task, snap previews |
--border, --ring | hairlines, focus rings |
--radius | every corner; 0 for the square look, 0.75rem for soft |
--panel-alpha | how see-through windows are (e.g. 78%) |
--panel-blur | how much windows blur what's behind them (e.g. 14px) |
A theme pack
[data-theme="lotus"] {
--radius: 0.75rem;
--panel-alpha: 62%;
--panel-blur: 22px;
--background: oklch(0.16 0.03 310);
--primary: oklch(0.78 0.14 345);
/* …the other colour tokens */
}Components use the rounded scale (rounded-sm…rounded-lg) everywhere, never fixed corners, so --radius alone takes the whole UI from square to rounded. Try Lotus from the theme menu in the taskbar.