Overview
The Support widget is fully isolated from your app's styles by default. All widget styles use the co- prefix, so they won't clash with your existing CSS.
How Theming Works
The widget checks two places for every style value:
- Your override (
--co-theme-*variables) - Built-in default (sensible OKLCH colors)
/* Widget looks for --co-theme-primary first */
--co-primary: var(--co-theme-primary, oklch(20.5% 0 0));Quick Start
Override widget colors by setting --co-theme-* variables:
.cossistant {
--co-theme-primary: #3b82f6;
--co-theme-background: #ffffff;
--co-theme-foreground: #0f172a;
--co-theme-radius: 12px;
}Available Theme Variables
| Variable | Default (Light) | Default (Dark) |
|---|---|---|
--co-theme-background | oklch(99% 0 0) | oklch(15.5% 0 0) |
--co-theme-foreground | oklch(14.5% 0 0) | oklch(98.5% 0 0) |
--co-theme-primary | oklch(20.5% 0 0) | oklch(98.5% 0 0) |
--co-theme-primary-foreground | oklch(98.5% 0 0) | oklch(20.5% 0 0) |
--co-theme-border | oklch(92.2% 0 0) | oklch(26.9% 0 0) |
--co-theme-muted | Color-mixed | Color-mixed |
--co-theme-muted-foreground | Color-mixed | Color-mixed |
--co-theme-radius | 0.625rem | 0.625rem |
Background
oklch(99% 0 0)Foreground
oklch(14.5% 0 0)Primary
oklch(20.5% 0 0)Border
oklch(92.2% 0 0)Status Colors
| Variable | Default |
|---|---|
--co-theme-destructive | oklch(57.7% 0.245 27.325) |
--co-theme-success | oklch(71.7% 0.18 142) |
--co-theme-warning | oklch(86.4% 0.144 99) |
--co-theme-neutral | oklch(60.8% 0 0) |
Destructive
oklch(57.7% 0.245 27.325)
Success
oklch(71.7% 0.18 142)
Warning
oklch(86.4% 0.144 99)
Neutral
oklch(60.8% 0 0)Accent Colors
| Variable | Default |
|---|---|
--co-theme-pink | oklch(76.3% 0.152 354) |
--co-theme-yellow | oklch(86.4% 0.144 99) |
--co-theme-blue | oklch(72.5% 0.132 241) |
--co-theme-orange | oklch(74.5% 0.166 50) |
Pink
oklch(76.3% 0.152 354)
Yellow
oklch(86.4% 0.144 99)
Blue
oklch(72.5% 0.132 241)
Orange
oklch(74.5% 0.166 50)
Light and Dark Mode
Using the theme prop
Force a specific theme regardless of your app's settings:
// Force dark theme
<Support theme="dark" />
// Force light theme (default)
<Support theme="light" />Automatic theme detection (default)
By default, the widget automatically adapts to your app's theme. It looks for:
.darkclass on any parent elementdata-color-scheme="dark"attribute on any parent element
This works seamlessly with popular theme libraries like next-themes and shadcn's theme system.
// Widget adapts automatically
<body className="dark">
<Support />
</body>
// Or with data attribute
<div data-color-scheme="dark">
<Support />
</div>Using shadcn/ui Colors
Want the widget to match your shadcn/ui theme? Map shadcn variables to widget variables:
: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 gives you full control—the widget only uses shadcn colors when you explicitly connect them.
Custom Branding
Match your brand identity with custom colors:
.cossistant {
--co-theme-primary: #ff6b35;
--co-theme-primary-foreground: #ffffff;
--co-theme-background: #fafafa;
--co-theme-foreground: #1a1a1a;
--co-theme-border: #e5e5e5;
--co-theme-radius: 16px;
}Advanced: Per-Shade Overrides
Fine-tune background shades for depth and hierarchy:
.cossistant {
--co-theme-background-50: #fafafa;
--co-theme-background-100: #f5f5f5;
--co-theme-background-200: #eeeeee;
--co-theme-background-300: #e0e0e0;
}By default, these are generated with color-mix() from your base colors.