Theming

Every FancyUI component reads its colors, radii and timings from CSS custom properties in the OKLCh color space — override a token and the whole library follows.

OKLCh color space shadcn-svelte compatible Dark mode Design tokens

Prefer to tune it visually? The Theme Generator adjusts these tokens with live sliders and hands you the CSS.

Open the Theme Generator

CSS setup

Import the FancyUI stylesheet in your app's global CSS, usually src/app.css:

css 
@import "tailwindcss";
@import "fancy-ui-svelte/tailwind.css";

Color system

All colors use the OKLCh color space for perceptually uniform gradients:

css 
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.208 0.042 265.755);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --accent: oklch(0.968 0.007 247.896);
  --border: oklch(0.929 0.013 255.508);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
}

Token names follow shadcn-svelte conventions, so an existing shadcn theme drops in unchanged.

Dark mode

Dark mode is activated by the .dark class on a parent element. FancyUI overrides every token:

css 
.dark {
  --background: oklch(0.05 0 0);
  --foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --card: oklch(0.1 0.005 265);
  --border: oklch(1 0 0 / 8%);
}

Animation tokens

Control animation timing globally:

css 
:root {
  --animation-fast: 150ms;
  --animation-normal: 300ms;
  --animation-slow: 500ms;
  --animation-slower: 1000ms;
}

Easing functions

Easing curves are tokens too, shared by every component transition:

css 
:root {
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Rainbow gradients

Used by RainbowButton, GradientButton and other gradient effects:

css 
:root {
  --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%);
}

Customizing

Override any token in your own CSS to change the look:

css 
:root {
  /* Make primary purple */
  --primary: oklch(0.5 0.25 280);
  --primary-foreground: oklch(0.98 0.01 280);

  /* Slower animations */
  --animation-normal: 500ms;
}

Tokens cascade: override them globally in :root, or scope them to a wrapper element to theme a single section.

Next steps