Skip to main content
ParticleUI
ParticleUI

Theme Generator

Adjust the OKLCH tokens below. The preview updates live. When you're happy, copy the CSS and paste it into your globals.css.

Accent
--color-accent

Primary brand color — buttons, focus rings, links

78%
0.17
200°
Background
--color-bg

Page background color

5%
0.00
265°
Surface 1
--color-surface-1

Card and panel backgrounds

8%
0.00
265°
Surface 2
--color-surface-2

Elevated surfaces and hover states

11%
0.00
265°
Text Primary
--color-text-1

Headings and critical UI text

97%
0.00
0°
Text Secondary
--color-text-2

Body copy and descriptions

70%
0.00
0°
PreviewLive
Sample Card
DefaultOutlineSecondary
globals.css
@layer base {
  :root {
  --color-accent: oklch(78% 0.170 200);
  --color-bg: oklch(5% 0.004 265);
  --color-surface-1: oklch(8% 0.004 265);
  --color-surface-2: oklch(11% 0.004 265);
  --color-text-1: oklch(97% 0.000 0);
  --color-text-2: oklch(70% 0.000 0);
  --color-surface-3: oklch(14% 0.004 265);
  --color-border: oklch(100% 0 0 / 0.07);
  --color-border-hover: oklch(100% 0 0 / 0.14);
  --color-accent-dim: oklch(78% 0.17 200 / 0.1);
  --color-accent-border: oklch(78% 0.17 200 / 0.25);
  --color-accent-text: oklch(85% 0.120 200);
  --color-text-3: oklch(48% 0 0);
  --color-text-4: oklch(30% 0 0);
  }
}