Skip to main content

​
Custom Styling

Match the Char AI widget to your brand with custom styling options.

​
Theme Selection

Choose from built-in themes: 
new CharWidget({
  apiKey: 'your-api-key',
  theme: 'light' // 'light', 'dark', or 'auto'
});

​
Custom Colors

Override the default color palette: 
new CharWidget({
  apiKey: 'your-api-key',
  colors: {
    primary: '#7c3aed',
    background: '#ffffff',
    text: '#1f2937',
    border: '#e5e7eb'
  }
});

​
CSS Custom Properties

Target CSS variables for fine-grained control: 
.char-widget {
  --char-primary: #7c3aed;
  --char-primary-hover: #6d28d9;
  --char-bg: #ffffff;
  --char-bg-secondary: #f9fafb;
  --char-text: #1f2937;
  --char-text-secondary: #6b7280;
  --char-border: #e5e7eb;
  --char-radius: 12px;
  --char-font-family: 'Inter', sans-serif;
}

​
Component Styling

​
Responsive Design

The widget automatically adapts to different screen sizes:
BreakpointBehavior
< 640pxFull-width modal
640px - 1024pxFloating panel
> 1024pxFloating or embedded

​
Dark Mode

Enable automatic dark mode detection: 
new CharWidget({
  apiKey: 'your-api-key',
  theme: 'auto', // Follows system preference
  darkMode: {
    background: '#1f2937',
    text: '#f9fafb'
  }
});