Theme Generator

Tune FancyUI's design tokens and watch the components react in real time. When it looks right, copy the generated CSS into your app's stylesheet (e.g. src/app.css). Colors use the OKLCh color space; the rainbow palette uses HSL. For the full token reference, see Theming.

Presets

Base

Primary

Lightness 0.21 Chroma 0.04 Hue 266

Accent

Lightness 0.65 Chroma 0.15 Hue 265

Radius 0.625rem

Motion 300ms

Rainbow palette

0 270 210 195 90

Live preview

Card surface

Uses --card, --foreground, --border and --radius.

Accent badge

BorderBeam

Beam colors follow Primary → Accent.

Generated CSS

@import "tailwindcss";
@import "fancy-ui-svelte/tailwind.css";
/* Assumes a shadcn-svelte-style setup that maps these tokens to Tailwind theme
   colors via @theme inline (e.g. --color-primary: var(--primary)). See Theming. */

:root {
	/* Surface (base: light) */
	--background: oklch(1 0 0);
	--foreground: oklch(0.129 0.042 264.695);
	--card: oklch(1 0 0);
	--muted-foreground: oklch(0.554 0.046 257.417);
	--border: oklch(0.929 0.013 255.508);

	/* Brand */
	--primary: oklch(0.208 0.042 265.8);
	--primary-foreground: oklch(0.985 0 0);
	--accent: oklch(0.65 0.15 265);
	--accent-foreground: oklch(0.145 0 0);

	/* Shape & motion (mode-independent — move to :root if you theme both modes) */
	--radius: 0.625rem;
	--animation-normal: 300ms;

	/* Rainbow palette (gradient effects, e.g. GradientButton / --gradient-rainbow) */
	--rainbow-1: hsl(0 100% 63%);
	--rainbow-2: hsl(270 100% 63%);
	--rainbow-3: hsl(210 100% 63%);
	--rainbow-4: hsl(195 100% 63%);
	--rainbow-5: hsl(90 100% 63%);
}