Theming

PolyUI stores all design tokens as CSS variables in the OKLCH color space. Edit one CSS file — changes apply at runtime without rebuilding.

Base Tokens

css

:root {
  /* Background & Surface */
  --background:       oklch(0.16 0.008 222);
  --card:             oklch(0.19 0.006 222);

  /* Text */
  --foreground:       oklch(0.94 0.005 75);
  --foreground-muted: oklch(0.60 0.008 75);

  /* Brand color */
  --primary:          oklch(0.72 0.18 55);   /* amber */
  --primary-foreground: oklch(0.15 0.01 55);

  /* Border */
  --border:           oklch(0.28 0.008 222);
  --ring:             oklch(0.72 0.18 55);

  /* Radius */
  --radius:           8px;
}

Override Tokens

Override any token in your globals.css — no need to touch component code.

css

/* Switch to blue theme */
:root {
  --primary: oklch(0.60 0.22 260);
  --primary-foreground: oklch(0.98 0.002 260);
  --ring: oklch(0.60 0.22 260);
}

/* Larger radius */
:root {
  --radius: 12px;
}

Light Theme

css

[data-theme="light"] {
  --background:       oklch(0.97 0.005 75);
  --foreground:       oklch(0.18 0.008 222);
  --primary:          oklch(0.48 0.20 55);
  --primary-foreground: oklch(0.98 0.002 75);
  --border:           oklch(0.88 0.005 220);
}

Add data-theme="light" to the html element to switch to light mode.

About OKLCH

PolyUI uses OKLCH instead of HEX or HSL. OKLCH lightness (L) is perceptually uniform — the same L value looks equally bright across hues, making design systems more predictable.

css

/* oklch(lightness chroma hue) */
--primary: oklch(0.72 0.18 55);
/*               ^L    ^C   ^H
   L: 0-1 (lightness)
   C: 0-0.4 (chroma)
   H: 0-360 (hue, 55 = amber)
*/

/* With alpha */
background: oklch(from var(--primary) l c h / 0.1);

Motion Tokens

css

:root {
  --ease-out:            cubic-bezier(0.16, 1, 0.3, 1);
  --duration-instant:    80ms;
  --duration-fast:       150ms;
  --duration-base:       240ms;
  --duration-deliberate: 400ms;
  --duration-slow:       600ms;
}

/* Usage example */
.btn {
  transition: background var(--duration-fast) var(--ease-out);
}