docs.theming.title

docs.theming.intro

docs.theming.basicTheming

docs.theming.basicThemingDesc

ChaskWidget.init({
  apiKey: 'your-api-key',
  organizationId: 'your-org-id',
  theme: {
    primaryColor: '#6366f1',
    primaryTextColor: '#ffffff',
    backgroundColor: '#ffffff',
    textColor: '#1a1a2e',
    borderRadius: '12px',
    position: 'bottom-right'
  }
});

docs.theming.darkMode

docs.theming.darkModeDesc

ChaskWidget.init({
  apiKey: 'your-api-key',
  organizationId: 'your-org-id',
  theme: {
    mode: 'dark'  // 'light', 'dark', or 'auto'
  }
});

docs.theming.cssVariables

docs.theming.cssVariablesDesc

docs.theming.variable	docs.theming.description
`--chask-primary`	Primary brand color
`--chask-primary-text`	Text on primary background
`--chask-background`	Chat window background
`--chask-text`	Main text color
`--chask-border-radius`	Border radius for elements
`--chask-shadow`	Box shadow for the widget

docs.theming.customCss

docs.theming.customCssDesc

ChaskWidget.init({
  apiKey: 'your-api-key',
  organizationId: 'your-org-id',
  theme: {
    customCss: `
      .chask-window {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      }
      .chask-header {
        border-bottom: 2px solid var(--chask-primary);
      }
      .chask-message-bubble {
        border-radius: 20px;
      }
    `
  }
});

Tip: Use the Playground to experiment with theme settings in real-time!