Styling: color, font, buttons

Panels are styled with CSS custom properties (variables) and shadow parts. Override either at any scope — global, per-theme class, or per-panel inline.

/* Theme by class — add the class to the panel element */
.theme-warm {
  --panel-background: rgba(60, 22, 12, 0.92);
  --panel-color: #fbece0;
  --panel-font-family: "Inter", system-ui, sans-serif;
}

/* Theme inline — set CSS variables on the handle.element */
handle.element.style.setProperty("--panel-background", "#003040");
handle.element.style.setProperty("--panel-color", "#a7e3ff");

CSS variables you can set

• --panel-background · panel surface fill
• --panel-color · text color
• --panel-caption-background · caption (title bar) fill
• --panel-caption-height · caption height in px
• --panel-radius · corner radius
• --panel-border · panel border
• --panel-shadow / --panel-shadow-focused
• --panel-font-family, --panel-font-size

Shadow parts

• ::part(caption), ::part(title), ::part(actions), ::part(action)
• ::part(body), ::part(resize-handle)