Match Your Brand

You can make the widget feel like part of your product without replacing any components.

Use this when

• the default widget shape is good and you mainly need branding
• you want a copy-paste way to set colors and radius
• you want the widget to follow your app theme or force light or dark mode

Smallest working change

Set the widget tokens once and keep the default UI.

Copy.cossistant {
  --co-theme-primary: #111827;
  --co-theme-primary-foreground: #ffffff;
  --co-theme-background: #ffffff;
  --co-theme-foreground: #111827;
  --co-theme-border: #e5e7eb;
  --co-theme-radius: 0px;
}

That is usually enough to make the widget feel like yours.

Common variants

Force light or dark mode

Copyimport { Support } from "@cossistant/react";
 
<Support theme="dark" />;

By default, the widget follows your app theme. It checks for .dark or data-color-scheme="dark" on parent elements.

Reuse your shadcn tokens

Copy:root {
  --co-theme-background: var(--background);
  --co-theme-foreground: var(--foreground);
  --co-theme-primary: var(--primary);
  --co-theme-primary-foreground: var(--primary-foreground);
  --co-theme-border: var(--border);
  --co-theme-radius: var(--radius);
}

This keeps the widget aligned with the rest of your app instead of inventing a second theme.

When to stop here

• colors, radius, and dark mode are enough
• you want the default layout to stay in place
• you do not need custom pages or a custom shell

Next step

• Pages & Layouts when you need a different first screen, an inline embed, or your own shell
• Copy & Locale when the next change is wording instead of UI

Core token reference

Extra tokens

Use these when the core tokens are not enough:

Status colors

Avatar accents

Background shades

The background shades are derived from your base colors with color-mix() unless you override them directly.