Styling

Restyle Sunboard's checklist, tours, and hotspots to match your product by overriding CSS variables.

Sunboard ships a complete default theme in @sunboard/react/styles.css, so the checklist, tours, and hotspots look polished the moment you install. You restyle them by overriding CSS custom properties — there's no config file and no component theming API to learn.

You don't need to do anything

The defaults are production-ready. Override variables only where you want Sunboard to match your brand. sunboard init appends a starter block of these variables to your global stylesheet when it can find one — if it didn't (every project structures CSS differently), just add the overrides yourself as shown below.

How it works

Every Sunboard surface reads its colors, font, and radius from --sunboard-* variables defined on :root. To customize, declare the variables you want to change in a stylesheet that loads after @sunboard/react/styles.css, so your values win the cascade. sunboard init imports the Sunboard stylesheet first for exactly this reason — your global CSS comes after it.

your global stylesheet

:root {
  /* Shared across all Sunboard UI */
  --sunboard-font: "Inter", system-ui, sans-serif;
  --sunboard-radius: 12px;

  /* Checklist card + buttons */
  --sunboard-checklist-background: white;
  --sunboard-checklist-foreground: #111827;
  --sunboard-checklist-border: #e5e7eb;
  --sunboard-checklist-primary: #2563eb;
  --sunboard-checklist-primary-foreground: white;
  --sunboard-checklist-success: #16a34a;
}

That's the common case — most teams only change the font, the corner radius, and the primary color to match their product.

Full variable reference

All variables are optional; any you don't set fall back to the shipped default.

Shared

Variable	Purpose
`--sunboard-font`	Font family for all Sunboard UI
`--sunboard-radius`	Corner radius for cards, buttons, and tooltips

Checklist

Variable	Purpose
`--sunboard-checklist-background`	Card surface
`--sunboard-checklist-foreground`	Card text
`--sunboard-checklist-border`	Card border
`--sunboard-checklist-shadow`	Card shadow
`--sunboard-checklist-muted`	Progress track / count pill background
`--sunboard-checklist-muted-foreground`	Secondary text
`--sunboard-checklist-primary`	Action buttons + progress fill
`--sunboard-checklist-primary-foreground`	Text on primary
`--sunboard-checklist-success`	Completed step indicator

Launcher

The collapsed checklist button. These default to the checklist's primary colors, so you usually don't need to set them separately.

Variable	Purpose
`--sunboard-launcher-background`	Launcher button background
`--sunboard-launcher-foreground`	Launcher icon/text
`--sunboard-launcher-border`	Launcher border
`--sunboard-launcher-shadow`	Launcher shadow
`--sunboard-launcher-count-background`	Unfinished-count badge

Tours

Variable	Purpose
`--sunboard-tour-background`	Tooltip surface
`--sunboard-tour-foreground`	Tooltip text
`--sunboard-tour-border`	Tooltip border
`--sunboard-tour-shadow`	Tooltip shadow
`--sunboard-tour-muted-foreground`	Tooltip secondary text
`--sunboard-tour-primary`	Primary (next) button
`--sunboard-tour-primary-foreground`	Text on primary button
`--sunboard-tour-secondary-background`	Secondary (back) button
`--sunboard-tour-secondary-foreground`	Secondary button text
`--sunboard-tour-secondary-border`	Secondary button border
`--sunboard-overlay-color`	Dimmed page overlay behind an active tour

Hotspots

Variable	Purpose
`--sunboard-hotspot-background`	Launcher dot
`--sunboard-hotspot-border`	Dot border
`--sunboard-hotspot-dot`	Inner dot color
`--sunboard-hotspot-shadow`	Dot shadow
`--sunboard-hotspot-pulse-ring`	Pulse ring color

Dark mode

Because everything is a CSS variable, dark mode is just another set of values under your dark selector — no Sunboard-specific switch:

.dark :root,
[data-theme="dark"] {
  --sunboard-checklist-background: #0b0f19;
  --sunboard-checklist-foreground: #e5e7eb;
  --sunboard-checklist-border: #1f2937;
  --sunboard-tour-background: #0b0f19;
  --sunboard-tour-foreground: #e5e7eb;
}

Every variable

Here's the complete set with its default values — the same block sunboard init appends to your global stylesheet when it can find one. Paste it into a stylesheet that loads after @sunboard/react/styles.css and edit any value you like.