Are you an LLM? Read llms.txt for a summary of the docs, or llms-full.txt for the full context.
Styling & theming · Boson Protocol
Skip to content

Styling & theming

The hosted widgets use CSS custom properties so you can override colors, fonts, and spacing from outside.

Override via data attribute

<button
  id="boson-commit"
  data-config-id="..."
  data-theme-overrides='{"colors": {"primary": "#ff6f61", "background": "#0e0e10"}, "font": "Inter, sans-serif"}'>
  Buy now
</button>

Override via CSS

:root {
  --boson-color-primary: #ff6f61;
  --boson-color-background: #0e0e10;
  --boson-font-family: "Inter", sans-serif;
}

The widget reads from :root after mount.

Dark mode

Pass data-theme="dark", or use a media query that flips your CSS variables on prefers-color-scheme: dark.

Custom CSS

For deeper customization (custom button styles, modal animations), embed via Zoid and style your wrapper. The widget's inner DOM is in an iframe and not directly stylable.

Next