Theming
Every GetUrUI item is coloured by CSS custom properties. Change a token and every component follows — in both themes.
Dark and light
Dark is the default. Light is applied with an attribute — no class juggling, and it works on any element, not just <html>:
1document.documentElement.setAttribute("data-theme", "light");
The theme-toggle component does this with a View Transition circle reveal and remembers the choice. To avoid a flash on load, set the attribute before paint with an inline script in <head>:
1<script dangerouslySetInnerHTML={{ __html: `(function(){try{var t=localStorage.getItem("theme");if(t!=="light"&&t!=="dark"){t=matchMedia("(prefers-color-scheme: light)").matches?"light":"dark"}document.documentElement.setAttribute("data-theme",t)}catch(e){}})()` }} />
Colour tokens
Each token is a CSS variable (--surface) and a Tailwind colour (bg-surface, text-surface, border-surface).
| Token | Use |
|---|---|
bg | Page background |
surface | Cards, frames, sidebar groups |
surface-raised | Popovers, menus, palette, toasts, sheets |
surface-sunken | Code blocks, inputs |
surface-hover | Hover wash on rows and ghost buttons |
border | Decorative hairlines |
border-strong | Control borders (3:1 contrast) |
ink | Primary text and icons |
ink-muted | Secondary text |
ink-subtle | Captions on bg and surface |
volt | Signature fill: primary buttons, active pills |
volt-ink | Volt as text, icon or focus ring |
volt-soft | Tinted ground for New badges, highlighted lines |
on-volt | Text on volt |
ember | Money and Pro: buy buttons, Pro badges |
ember-ink | Ember as text |
success / warning / danger / info | Status — always with an icon and a word |
glass / scrim | Frosted surfaces / overlay backdrop |
Use your brand colour
Override the volt tokens in your stylesheet. Keep on-volt readable on the fill and give volt-ink a darker value in light mode so links stay above 4.5:1:
1:root, [data-theme="dark"] {
2 --volt: #c9cff;
3 --volt-ink: #db4ff;
4 --volt-soft: #c9cff22;
5 --on-volt: #b0d1a;
6}
7[data-theme="light"] {
8 --volt-ink: #f4fd1;
9 --volt-soft: #c9cff33;
10}
Radius and shadow
Radii are rounded-xs 6px, rounded-sm 10px, rounded-md 14px, rounded-lg 20px, rounded-xl 28px and rounded-full. Shadows are shadow-sm, shadow-md, shadow-lg and shadow-glow (primary CTA hover only). Change them in the @theme block of geturui.css.
Per-section themes
Because tokens are scoped by attribute, a light card inside a dark page is one attribute away:
1<section data-theme="light" className="bg-bg text-ink">…</section>