PersianLabs/ui

Theming

Every color in PersianLabs/ui is a CSS variable. Copy the blocks below into your own globals.css and adjust the values — every component reads from these tokens, nothing is hard-coded.

Preview

background
card
popover
primary
secondary
muted
accent

Status colors are meant to be used as soft tints — text in the base color over a faint background, the same way destructive buttons are styled — not as solid fills.

destructive
info
success
warning
border
input
ring

Light

:root,
.light {
  --radius: 0.625rem;
  --background: var(--color-white);
  --foreground: var(--color-neutral-800);
  --card: var(--color-white);
  --card-foreground: var(--color-neutral-800);
  --popover: var(--color-white);
  --popover-foreground: var(--color-neutral-800);
  --primary: var(--color-neutral-800);
  --primary-foreground: var(--color-neutral-50);
  --secondary: --alpha(var(--color-black) / 4%);
  --secondary-foreground: var(--color-neutral-800);
  --muted: --alpha(var(--color-black) / 4%);
  --muted-foreground: color-mix(
    in srgb,
    var(--color-neutral-500) 90%,
    var(--color-black)
  );
  --accent: --alpha(var(--color-black) / 4%);
  --accent-foreground: var(--color-neutral-800);
  --destructive: var(--color-red-500);
  --destructive-foreground: var(--color-red-700);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
  --border: --alpha(var(--color-black) / 8%);
  --input: --alpha(var(--color-black) / 10%);
  --ring: var(--color-neutral-400);
  --sidebar: var(--color-neutral-50);
  --sidebar-foreground: color-mix(
    in srgb,
    var(--color-neutral-800) 64%,
    var(--sidebar)
  );
  --sidebar-primary: var(--color-neutral-800);
  --sidebar-primary-foreground: var(--color-neutral-50);
  --sidebar-accent: --alpha(var(--color-black) / 4%);
  --sidebar-accent-foreground: var(--color-neutral-800);
  --sidebar-border: --alpha(var(--color-black) / 6%);
  --sidebar-ring: var(--color-neutral-400);
  --chart-1: oklch(0.32 0 none);
  --chart-2: oklch(0.41 0 none);
  --chart-3: oklch(0.54 0 none);
  --chart-4: oklch(0.71 0 none);
  --chart-5: oklch(0.89 0 none);
}

Dark

.dark {
  --background: oklch(0.191 0 89.9);
  --foreground: oklch(0.917 0.013 82.4);
  --card: oklch(0.226 0 89.9);
  --card-foreground: oklch(0.917 0.013 82.4);
  --popover: color-mix(in srgb, var(--background) 98%, var(--color-white));
  --popover-foreground: var(--color-neutral-100);
  --primary: var(--color-neutral-100);
  --primary-foreground: var(--color-neutral-800);
  --secondary: --alpha(var(--color-white) / 4%);
  --secondary-foreground: var(--color-neutral-100);
  --muted: --alpha(var(--color-white) / 4%);
  --muted-foreground: color-mix(
    in srgb,
    var(--color-neutral-500) 90%,
    var(--color-white)
  );
  --accent: --alpha(var(--color-white) / 4%);
  --accent-foreground: var(--color-neutral-100);
  --destructive: color-mix(
    in srgb,
    var(--color-red-500) 90%,
    var(--color-white)
  );
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
  --border: --alpha(var(--color-white) / 6%);
  --input: --alpha(var(--color-white) / 8%);
  --ring: var(--color-neutral-500);
  --sidebar: color-mix(
    in srgb,
    var(--color-neutral-950) 97%,
    var(--color-white)
  );
  --sidebar-foreground: color-mix(
    in srgb,
    var(--color-neutral-100) 64%,
    var(--sidebar)
  );
  --sidebar-primary: var(--color-neutral-100);
  --sidebar-primary-foreground: var(--color-neutral-800);
  --sidebar-accent: --alpha(var(--color-white) / 4%);
  --sidebar-accent-foreground: var(--color-neutral-100);
  --sidebar-border: --alpha(var(--color-white) / 5%);
  --sidebar-ring: var(--color-neutral-400);
  --chart-1: oklch(1 0 none);
  --chart-2: oklch(0.73 0 none);
  --chart-3: oklch(0.51 0 none);
  --chart-4: oklch(0.39 0 none);
  --chart-5: oklch(0.32 0 none);
}