Theme system

KiteUI ships preset themes as CSS variables. Install with the CLI, then customize in .kiteui/theme.json.

CLI

Install themes with npx kiteuikit theme <preset> or the full setup wizard. CLI reference

$ npx kiteuikit theme ocean

Presets

KiteUI Default

Soft pink, sky blue, and lavender — the classic KiteUI look.

default

Sunset

Warm peach, coral, and golden hour tones.

sunset

Ocean

Cool teal, deep blue, and seafoam accents.

ocean

Forest

Fresh mint, sage, and earthy greens.

forest

Lavender Dream

Soft purple, lilac, and blush gradients.

lavender

Mono

Neutral grayscale with subtle bubble tints.

mono

Customization

Override any token in .kiteui/theme.json:

{
  "preset": "ocean",
  "overrides": {
    "light": {
      "--bubble-pink": "oklch(0.88 0.08 350)",
      "--primary": "oklch(0.58 0.14 230)"
    },
    "dark": {}
  }
}
  • --bubble-pinkBubble pink
  • --bubble-skyBubble sky
  • --bubble-mintBubble mint
  • --bubble-peachBubble peach
  • --bubble-lavenderBubble lavender
  • --primaryPrimary
  • --backgroundBackground
  • --foregroundForeground
  • --radiusBorder radius
  • --radius-bubbleBubble radius
Back to installation