BVector Chat

Theming

Pass a colorTokensobject to override any of the 16 CSS design tokens used inside the widget's Shadow DOM.

How theming works

Because the widget lives inside a Shadow DOM, it has its own CSS scope. BVector Chat exposes 16 semantic color tokens as CSS custom properties within that scope. You map your brand colors to these tokens via the colorTokens option — no CSS files, no class overrides needed.

Tokens accept any valid CSS color value: hex, rgb, hsl, oklch, or CSS custom properties from the outer page scope (e.g. var(--brand-color)).

Available tokens

Token	Description
background	Main widget background color
foreground	Primary text color
primary	Primary action / button color
primaryForeground	Text color on primary elements
secondary	Secondary action color
secondaryForeground	Text color on secondary elements
accent	Accent / highlight color
accentForeground	Text color on accent elements
muted	Muted / subdued surface color
mutedForeground	Text color on muted surface
card	Card and panel background
cardForeground	Text inside cards and panels
border	Border color throughout the widget
input	Input field background color
ring	Focus ring color
borderRadius	Base corner radius, e.g. "8px" or "0px"

Dark theme example

example.tsx

new ChatWidget({
  title: 'Support Chat',
  config: { /* your ApiConfig */ },
  colorTokens: {
    background: '#0a0a0a',
    foreground: '#f8f8f2',
    primary: '#00b4ff',
    primaryForeground: '#ffffff',
    accent: '#00b4ff',
    border: 'rgba(255, 255, 255, 0.1)',
    borderRadius: '8px',
  },
});

Light theme example