Customize

One accent, every control

Every accented control reads eight variables, --primary and its variants plus --ring, and a preset swaps all eight per mode. Pick a preset or a brand colour below to try it, then copy the overrides. A custom colour is darkened or lifted only if it would fall under 3:1 contrast against the page.

/* paneui accent: blue */
/* Paste after the theme variables in globals.css. */
:root {
  --primary: #0090ff;
  --primary-hover: #0588f0;
  --primary-active: #0d74ce;
  --primary-foreground: #fff;
  --primary-subtle: #008ff519;
  --primary-subtle-hover: #009eff2a;
  --primary-border: #0088f653;
  --ring: #0084e6a1;
}

.dark {
  --primary: #0090ff;
  --primary-hover: #3b9eff;
  --primary-active: #70b8ff;
  --primary-foreground: #fff;
  --primary-subtle: #0077ff3a;
  --primary-subtle-hover: #0075ff57;
  --primary-border: #0f89fd7f;
  --ring: #0090ff;
}

One radius, every corner

Every radius token multiplies --radius, and nested surfaces subtract their padding from it, so corners stay concentric at any value up to the 16px cap. Pick a preset or drag for your own, then copy the override, or install a preset with theme-radius-none, -sm, -lg or -xl.

/* paneui radius: default */
:root {
  --radius: 0.5rem;
}

Background

Use these for anything that must be opaque, and sunken for wells inside a surface.

• --backgroundbg-backgroundlight#fffdarkoklch(15% 0 0)
• --cardbg-cardlight#fffdark#111
• --popoverbg-popoverlight#fffdarkoklch(25.2% 0 0)
• --surface-sunkenbg-surface-sunkenlight#0000000ddark#0006
• --surface-standoutbg-surface-standoutlight#202020dark#222
• --shellbg-shelllightoklch(97.3% 0 0)dark#000
• --codebg-codelight#f9f9f9dark#191919

Fill

Use primary for the main action and secondary, muted or accent for hover, selected and track states. The last three are translucent, so never use them as surfaces.

• --primaryaccentbg-primarylight#0090ffdark#0090ff
• --secondarybg-secondarylight#0000000fdark#ffffff12
• --mutedbg-mutedlight#0000000fdark#ffffff12
• --accentbg-accentlight#00000017dark#ffffff1b

Accent roles

Use hover and active for pressed solids, and subtle for selected rows and tinted chips.

• --primary-hoveraccentbg-primary-hoverlight#0588f0dark#3b9eff
• --primary-activeaccentbg-primary-activelight#0d74cedark#70b8ff
• --primary-subtleaccentbg-primary-subtlelight#008ff519dark#0077ff3a
• --primary-subtle-hoveraccentbg-primary-subtle-hoverlight#009eff2adark#0075ff57
• --primary-borderaccentborder-primary-borderlight#0088f653dark#0f89fd7f

Text

Use foreground for primary text, muted-foreground for captions and nav icons, and fg-tertiary only for placeholders and hints.

• --foregroundtext-foregroundlightAa#000000dfdarkAa#ffffffed
• --muted-foregroundtext-muted-foregroundlightAa#0000009bdarkAa#ffffffaf
• --fg-tertiarytext-fg-tertiarylightAa#00000072darkAa#ffffff64
• --fg-disabledtext-fg-disabledlightAa#0004darkAa#fff5
• --card-foregroundtext-card-foregroundlightAa#000000dfdarkAa#ffffffed
• --popover-foregroundtext-popover-foregroundlightAa#000000dfdarkAa#ffffffed
• --primary-foregroundaccenttext-primary-foregroundlightAa#fffdarkAa#fff
• --standout-foregroundtext-standout-foregroundlightAa#fffdarkAa#ffffffed
• --secondary-foregroundtext-secondary-foregroundlightAa#000000dfdarkAa#ffffffed
• --accent-foregroundtext-accent-foregroundlightAa#000000dfdarkAa#ffffffed

Border

Use border for dividers, border-strong or input for field outlines, and ring at /50 for focus.

• --borderborder-borderlight#00000017dark#ffffff1b
• --border-subtleborder-border-subtlelight#00000006dark#ffffff09
• --border-strongborder-border-stronglight#00000026dark#ffffff2c
• --inputborder-inputlight#00000017dark#ffffff1b
• --shell-borderborder-shell-borderlightoklch(0% 0 0 / 10%)darkoklch(100% 0 0 / 9%)
• --ringaccentring-ring/50light#0084e6a1dark#0090ff
• --scrollbarvar(--scrollbar)light#00000026dark#ffffff2c
• --scrollbar-hovervar(--scrollbar-hover)light#0004dark#fff5

State

These keep their meaning under every accent. Use subtle for alert and badge washes, and the solid for icons and text.

• --destructivebg-destructivelight#e54d2edark#e54d2e
• --destructive-hoverbg-destructive-hoverlight#dd4425dark#ec6142
• --destructive-subtlebg-destructive-subtlelight#f52b0018dark#ff35232b
• --destructive-borderborder-destructive-borderlight#f92d0050dark#ff4f3864
• --destructive-foregroundtext-destructive-foregroundlightAa#fffcfcdarkAa#fff
• --successbg-successlight#30a46cdark#30a46c
• --success-hoverbg-success-hoverlight#2b9a66dark#33b074
• --success-subtlebg-success-subtlelight#00a43319dark#22ff991e
• --success-borderborder-success-borderlight#00963c52dark#44ffaa4b
• --success-foregroundtext-success-foregroundlightAa#fbfefcdarkAa#fff
• --warningbg-warninglight#f76b15dark#f76b15
• --warning-hoverbg-warning-hoverlight#ef5f00dark#ff801f
• --warning-subtlebg-warning-subtlelight#ff9c0029dark#fb6a0025
• --warning-borderborder-warning-borderlight#ff81007ddark#fd75045c
• --warning-foregroundtext-warning-foregroundlightAa#fefcfbdarkAa#fff

Chart

Charts never read primary, so data keeps its colours under every accent. Use them as classes, or as var(--chart-n) in SVG.

• --chart-1bg-chart-1light#0090ffdark#0090ff
• --chart-2bg-chart-2light#ef5f00dark#f76b15
• --chart-3bg-chart-3light#6e56cfdark#6e56cf
• --chart-4bg-chart-4light#30a46cdark#30a46c
• --chart-5bg-chart-5light#d6409fdark#d6409f
• --chart-6bg-chart-6light#ab6400dark#ffc53d
• --chart-7bg-chart-7light#00a2c7dark#00a2c7
• --chart-8bg-chart-8light#8d8d8ddark#6e6e6e