Theme

Light & dark via a `.dark` class, plus full CSS-variable theming — no runtime theme objects, no CSS-in-JS.

ParamPanel is styled entirely through CSS custom properties. It ships light and dark palettes built on Open Color with a shadcn-inspired surface/border/ring treatment, and you can restyle everything from your own stylesheet.

Light & dark

Light is the default. The dark palette applies whenever a .dark class is present on any ancestor of the panel — the same convention Tailwind and shadcn use, so ParamPanel picks up your app's existing theme toggle for free:

<html class="dark">
  <!-- every panel inside renders dark -->
</html>

// Flip the whole app between light and dark.
document.documentElement.classList.toggle("dark");

A closer .light ancestor overrides an outer .dark, so a light island inside a dark tree works:

<div class="dark">
  <div class="light">
    <!-- this panel is light -->
  </div>
</div>

The switch is pure CSS — no JavaScript re-render, no theme option on the panel.

CSS variables

Override the variables on the .param-panel root class. These are the main knobs (see the stylesheet for the complete set):

.param-panel {
  --pp-bg: #ffffff;
  --pp-surface: #f8f9fa;
  --pp-text: #212529;
  --pp-muted: #868e96;
  --pp-border: #dee2e6;
  --pp-accent: #228be6;
  --pp-danger: #fa5252;

  --pp-radius: 8px;
  --pp-row-height: 28px;
  --pp-font-size: 12px;
  --pp-gap: 8px;
}

Because variables cascade, you can scope a different look to one panel by targeting its className or id:

const pp = createPanel({ title: "Inspector", className: "my-theme" });

.param-panel.my-theme {
  --pp-accent: #e8590c;
  --pp-radius: 10px;
}

To supply your own dark variant, override the variables under a .dark ancestor selector, mirroring the built-in rule:

.dark .param-panel.my-theme {
  --pp-accent: #ff922b;
}

Styling guidelines

Prefer CSS variables over deep element overrides.
Style against the stable top-level classes; internal element structure is not a permanent public API.
Ensure focus states stay visible and contrast stays sufficient when you customize colors — ParamPanel keeps a visible focus ring on every control.

See Density for adjusting row height and spacing.

Light & dark

CSS variables

Styling guidelines

On this page