ChatUI - Theme System Demo

Default Light

Clean, minimal theme with light colors - perfect for professional applications.

Blue primary color (#007bff)
White background
Light gray surfaces

Default Dark

Modern dark theme with high contrast - ideal for low-light environments.

Light blue primary (#4dabf7)
Dark background (#1a1a1a)
Dark gray surfaces

Branded Light

Corporate-friendly theme with purple accent - great for branded experiences.

Indigo primary (#6366f1)
White background
Purple-tinted surfaces

Branded Dark

Premium dark theme with purple tones - sophisticated and modern.

Light indigo primary (#818cf8)
Slate background (#0f172a)
Dark slate surfaces

Custom Colors

Fully customizable via data attributes - no CSS knowledge required!

Custom primary color
Custom backgrounds
Custom text colors

System Preference

Automatically respects user's system theme preference.

Detects prefers-color-scheme
Watches for changes
localStorage persistence

📝 Implementation Examples

1. Default Theme with Light Mode

<script
  id="chat-widget"
  src="../dist/chat-widget.js"
  data-server-url="http://localhost:3000"
  data-position="bottom-right"
  data-theme="default"
  data-mode="light"
  data-title="Chat with us"></script>
      

2. Branded Theme with Dark Mode

<script
  id="chat-widget-branded"
  src="../dist/chat-widget.js"
  data-server-url="http://localhost:3000"
  data-position="bottom-left"
  data-theme="branded"
  data-mode="dark"
  data-title="Support Chat"></script>
      

3. Custom Colors (Data-Attributes-First)

<script
  id="chat-widget-custom"
  src="../dist/chat-widget.js"
  data-server-url="http://localhost:3000"
  data-position="bottom-right"
  data-theme="default"
  data-mode="light"
  <!-- Custom Light Mode Colors -->
  data-color-light="#ff6b6b"
  data-bg-color-light="#ffffff"
  data-surface-color-light="#ffe5e5"
  data-text-color-light="#2d2d2d"
  data-border-color-light="#ffcccc"
  <!-- Custom Dark Mode Colors -->
  data-color-dark="#ff8787"
  data-bg-color-dark="#1a1a1a"
  data-surface-color-dark="#2d2020"
  data-text-color-dark="#ffffff"
  data-border-color-dark="#4a3030"
  data-title="Custom Chat"></script>
      

4. Programmatic API

// Initialize widget programmatically
const widget = ChatUI.init({
  serverUrl: 'http://localhost:3000',
  position: 'bottom-right',
  title: 'Chat with us'
});

// Switch theme
widget.setTheme('branded');

// Switch mode
widget.setThemeMode('dark');

// Toggle light/dark
widget.toggleThemeMode();

// Get current theme config
const config = widget.getThemeConfig();
console.log(config); // { theme: 'branded', mode: 'dark', colors: {...} }
      

💡 Pro Tip: Theme preferences are automatically saved to localStorage and will persist across page reloads. The widget also respects the user's system theme preference (prefers-color-scheme) if no explicit preference is set.

🎨 ChatUI Theme System

🎛️ Live Theme Controls