CSS Variables — carabine/ui

Global theme override

Place CSS variable overrides in your global stylesheet. All components in the document will pick them up.

:root {
  /* Toggle */
  --cui-toggle-width: 48px;
  --cui-toggle-height: 26px;
  --cui-toggle-on-bg: #10b981;   /* emerald-500 */
  --cui-toggle-off-bg: #e4e4e7;

  /* Tooltip */
  --cui-tooltip-bg: #1e293b;
  --cui-tooltip-radius: 8px;
  --cui-tooltip-font-size: 12px;

  /* CopyButton */
  --cb-size: 32px;
  --cb-radius: 6px;
}

Scoped override

Wrap a section in a container with a custom class to scope tokens without affecting the rest of the page.

.dark-panel {
  --cui-toggle-on-bg: #818cf8;
  --cui-tooltip-bg: #f4f4f5;
  --cui-tooltip-text: #09090b;
}

<div className="dark-panel">
  <Toggle checked={on} onCheckedChange={setOn} />
  <Tooltip.Root>...</Tooltip.Root>
</div>

Per-component inline override

Pass style directly on the component to override variables on that single instance.

<Toggle
  checked={on}
  onCheckedChange={setOn}
  style={{ '--cui-toggle-on-bg': '#f43f5e' } as React.CSSProperties}
/>

Available tokens

Prop	Type	Default	Description
`--cui-toggle-width`	`length`	`40px`	Track width.
`--cui-toggle-height`	`length`	`22px`	Track height.
`--cui-toggle-on-bg`	`color`	`#09090b`	Track color when checked.
`--cui-toggle-off-bg`	`color`	`#e4e4e7`	Track color when unchecked.
`--cui-tooltip-bg`	`color`	`rgba(23,23,23,0.92)`	Tooltip background.
`--cui-tooltip-radius`	`length`	`7px`	Tooltip border-radius.
`--cui-tooltip-font-size`	`length`	`12px`	Tooltip text size.
`--cb-size`	`length`	`28px`	CopyButton icon button size.
`--cb-radius`	`length`	`5px`	CopyButton border-radius.

Dark mode

Swap tokens inside a .dark class or prefers-color-scheme media query for instant dark mode support.

@media (prefers-color-scheme: dark) {
  :root {
    --cui-toggle-off-bg: #3f3f46;
    --cui-tooltip-bg: #fafafa;
    --cui-tooltip-text: #09090b;
  }
}

/* or class-based (e.g. next-themes) */
.dark {
  --cui-toggle-off-bg: #3f3f46;
  --cui-tooltip-bg: #fafafa;
  --cui-tooltip-text: #09090b;
}