Theme

Theme Studio

Tune the docs palette, then copy a Tailwind v4 @theme block into src/tailwind.css. The live preview shows buttons, folder/underline/pills tabs, forms, and overlays as the brand color changes.

  1. Pick a palette. Choose a curated preset (Supabase, Linear, Tokyo Night, Nord, Catppuccin, Vercel) or drag the primary hue.
  2. Tune tokens. Set radius, font, border contrast, density, and background.
  3. Copy @theme. Copy the generated Tailwind v4 @theme block.
  4. Paste into the app. Paste the block into src/tailwind.css. ply-ui.css points buttons and blue-* widgets at --ply-brand and --ply-scale-*, so one palette covers the catalog.

The docs remember your palette, radius, background, font, and density between visits. Light and dark mode are set separately. To share a setup, add it to the page link as query parameters, such as ?theme=nord&font=inter.

Curated presets

More palettes

Primary hue

Using the selected preset

Radius

Font

Border contrast

Density

Background

Live preview

Every primary control below follows the hue, radius, and contrast.

Actions

Primary link

Status

BadgeSoft badgeChipActive chip
Soft alert — brand color, radius, and contrast update immediately.
Solid alert uses the primary fill.
Outline alert uses the primary border.

Tabs — folder, underline, pills

Folder

Folder tabs pick up --ply-primary on the active item.

Underline

Underline tabs pick up --ply-primary on the active item.

Pills

Pills tabs pick up --ply-primary on the active item.

Forms

 Workspace
62

Plan

Metrics & navigation

Revenue

$48,295

+12.5% vs last month

Calendar

September 2026

S
M
T
W
T
F
S
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10

Timeline & accordion

Now

Hue applied across primary controls.

Next

Copy the @theme block.

Done

Paste into src/tailwind.css.

Headers use --ply-ring when focused.

Open this to see the ring follow the brand color.

Overlays

Tailwind v4 @theme

Paste into src/tailwind.css. See Getting started for the rest of the Tailwind setup.

css
/* Paste into src/tailwind.css */
@import "tailwindcss";

@source "./**/*.{html,ts}";

@theme {
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --radius-lg: 0.5rem;
  --radius-md: calc(var(--radius-lg) - 2px);
  --radius-sm: calc(var(--radius-lg) - 4px);
  --color-blue-50: rgb(239 246 255);
  --color-blue-100: rgb(219 234 254);
  --color-blue-200: rgb(191 219 254);
  --color-blue-300: rgb(147 197 253);
  --color-blue-400: rgb(96 165 250);
  --color-blue-500: rgb(59 130 246);
  --color-blue-600: rgb(37 99 235);
  --color-blue-700: rgb(29 78 216);
  --color-blue-800: rgb(30 64 175);
  --color-blue-900: rgb(30 58 138);
  --color-blue-950: rgb(23 37 84);
}

/* Semantic tokens. ply-ui.css reads --ply-brand / --ply-scale-* even when this file loads first. */
:root {
  --ply-brand: rgb(37 99 235);
  --ply-brand-hover: rgb(29 78 216);
  --ply-brand-active: rgb(30 64 175);
  --ply-primary: rgb(37 99 235);
  --ply-primary-hover: rgb(29 78 216);
  --ply-primary-active: rgb(30 64 175);
  --ply-primary-foreground: #ffffff;
  --ply-primary-soft: color-mix(in srgb, var(--ply-primary) 14%, transparent);
  --ply-ring: rgb(37 99 235);
  --ply-scale-50: rgb(239 246 255);
  --ply-scale-100: rgb(219 234 254);
  --ply-scale-200: rgb(191 219 254);
  --ply-scale-300: rgb(147 197 253);
  --ply-scale-400: rgb(96 165 250);
  --ply-scale-500: rgb(59 130 246);
  --ply-scale-600: rgb(37 99 235);
  --ply-scale-700: rgb(29 78 216);
  --ply-scale-800: rgb(30 64 175);
  --ply-scale-900: rgb(30 58 138);
  --ply-scale-950: rgb(23 37 84);
  --ply-radius: 0.5rem;
  --radius: var(--ply-radius);
  --base-primary: var(--ply-primary);
  --base-primary-hover: var(--ply-primary-hover);
  --base-primary-active: var(--ply-primary-active);
  --base-primary-foreground: var(--ply-primary-foreground);
  --base-primary-soft: var(--ply-primary-soft);
  --base-ring: var(--ply-ring);
  --base-radius: var(--ply-radius);
}

FAQ

Same wording as the canonical FAQ.

Open Theme Studio at https://ply-ui.com/theme/ or the docs customizer, pick a preset or hue, then copy the Tailwind v4 @theme block into src/tailwind.css. ply-ui.css points --ply-primary and Tailwind blue-* utilities at that palette (--ply-brand and --ply-scale-*). The live preview shows buttons, tabs, forms, and overlays together.

Yes — class-based dark mode on <html>, components pair light/dark classes (bg-white dark:bg-slate-800).

Node.js 22.22+ or 24.15+, a standalone Angular 22 app (Angular 19 is on the compat/angular-19 branch), Tailwind CSS 4, and the Angular CDK. No custom theme is required.