Theme guide

Host themes

Pass theme="light" or theme="dark". Omit theme and the shell stays the light cream default: no data-theme attribute and no prefers-color-scheme rule. Marketing pages stay light. The widget does not detect the host theme for you.

.bsw-cm[data-theme="dark"] {
  --bsw-cm-bg: #1a1a14;
  --bsw-cm-panel: #24241c;
  --bsw-cm-fg: #f6f6f1;
  --bsw-cm-muted: #b7b29f;
  --bsw-cm-line: #3a3a30;
  --bsw-cm-accent: #c8ef00;
  --bsw-cm-accent-fg: #1a1a14;
  --bsw-cm-radius: 12px;
}

Set the same variables on .bsw-cm for the light shell. className is for layout, not for replacing those tokens. Published branding.primaryColor sets --bsw-cm-accent inline and can override your accent.

Props reference: React component.

Related: React guide · Configuration · Quickstart