Skip to Content
StylingTheming

Theme System

AI Chat Bootstrap reads the same CSS custom properties used by shadcn/ui (--background, --foreground, --card, --border, etc.). Unlike earlier releases, we no longer ship fallback values—if those tokens are missing, every chat surface appears unstyled. The fix is to define the light/dark palette once in your globals.css (or wherever you manage Tailwind base styles).

The CLI scaffold already injects the token block and the extra imports our components expect. If you are wiring things up manually, mirror that layout so animations, tokens, and chat styles stay in sync.

Required Imports & Token Setup

Import the library tokens, then declare the shadcn-compatible palette. Keep the variable block outside of @layer base so it is not hoisted ahead of our imports.

/* src/app/globals.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
 
@import "tw-animate-css";
@import "ai-chat-bootstrap/tokens.css";
@import "ai-chat-bootstrap/ai-chat.css";
 
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}
 
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

Customize the palette for your brand, but keep every variable defined—our component-level tokens reference each one directly.

If you compile the Tailwind utilities yourself, feel free to remove the @import "ai-chat-bootstrap/ai-chat.css"; line once you confirm your build emits the chat classes.

  • tw-animate-css ships the shared keyframes the chat popovers, modals, and tooltips use. Install it (pnpm add tw-animate-css) and import it before our tokens.
  • Keep the palette objects outside of @layer base; Tailwind’s hoisting would otherwise move them ahead of the token import.

Tailwind Preset

Hook the preset so Tailwind makes the same variables available to your utility classes and components. Remember to let Tailwind scan the package so the generated CSS includes chat utilities.

// tailwind.config.ts
import preset from "ai-chat-bootstrap/tailwind.preset";
 
export default {
  presets: [preset],
  content: [
    "./src/**/*.{ts,tsx,js,jsx,mdx}",
    "./node_modules/ai-chat-bootstrap/dist/**/*.{js,mjs}",
  ],
};

Demo reference

Theme Playground

Use the header theme selector to toggle palettes and watch the chat below restyle instantly. The control updates CSS variables on document.documentElement, exactly how you would theme your own app.

Selected: SystemApplied palette: LightUse the header selector to change themes.

Demo Assistant

• Theme-aware UI

Welcome! Change the theme from the header to restyle the chat instantly.

As

How can I try other chat themes?

Choose "Solar Light" or "Solar Dark" to apply the bundled warm gradients.

As

Shipping Your Own Palette

  • Override the shadcn tokens (--background, --foreground, --primary, etc.) on :root, [data-theme="dark"], or any scoped element.
  • For multi-theme apps, toggle a class or data-theme attribute on html/body and let the tokens cascade—no need to touch component code.
  • Extend tokens for custom surfaces via --acb-chat-* variables whenever you need granular control (see ai-chat-bootstrap/tokens.css for the full list).

Because every component reads colors through CSS variables, you can safely layer your own design system on top of AI Chat Bootstrap without modifying our source.

Last updated on
createMcpToolsHandler