Theme Builder

Pick tokens, watch the preview re-theme, copy the CSS — the token playground as a full tool.

The Theme Builder expands the Theming page's playground into a complete tool: color pickers for the core palette, the radius slider, a live preview that re-themes as you type, and a generated CSS override block you can copy straight into your global stylesheet after the @imports.

Tokens

Scoped to the preview only — nothing persists.

Primary --primary#4f46e5

Secondary --secondary#f4f4f5

Destructive --destructive#c02626

Success --success#16835a

Warning --warning#d99a26

Background --background#ffffff

Radius --radius0.5rem

Preview

Everything re-themes live.

SuccessWarning

:root {
  --primary: #4f46e5;
  --primary-foreground: oklch(98% 0 0);
  --secondary: #f4f4f5;
  --secondary-foreground: oklch(35% 0 0);
  --destructive: #c02626;
  --destructive-foreground: oklch(98% 0 0);
  --success: #16835a;
  --success-foreground: oklch(98% 0 0);
  --warning: #d99a26;
  --warning-foreground: oklch(35% 0 0);
  --background: #ffffff;
  --radius: 0.5rem;
}

.dark {
  /* background darkened from the light pick */
  --background: #141414;
}

How the copied CSS is meant to be used

Paste it after the srui @imports in your global CSS — last definition wins, so it overrides the preset defaults for your whole app:

@import "tailwindcss";
@import "@iammikz/srui/theme.css";
@import "@iammikz/srui/presets/flat.css";

/* paste the generated block here */

Every token the builder emits is part of the canonical token contract — no invented variables.