Themes & Customization

InAppAI React comes with 7 built-in themes and extensive customization options to match your brand identity. You can use themes as-is or override them with custom styles.

Built-in Themes

Choose from 7 professionally designed themes:

Theme	Description	Best For
light	Clean white background, blue accents	General purpose, modern apps
dark	Dark background, reduced eye strain	Night mode, developer tools
professional	Refined blues and grays	Business apps, enterprise
playful	Vibrant colors, rounded corners	Consumer apps, casual use
minimal	Monochrome, ultra-clean	Documentation, minimalist design
ocean	Blue and teal gradient	Marine, travel, water themes
sunset	Orange and pink gradient	Creative, warm branding

Using Built-in Themes

Simply set the theme prop:

import { useState } from 'react';
import { InAppAI, Message } from '@inappai/react';
import '@inappai/react/styles.css';

function App() {
  const [messages, setMessages] = useState<Message[]>([]);

  return (
    <InAppAI
      agentId="your-agent-id"
      messages={messages}
      onMessagesChange={setMessages}
      theme="dark"  // or: light, professional, playful, minimal, ocean, sunset
    />
  );
}

Custom Styling

Override any aspect of the appearance using the customStyles prop.

Complete Customization Example

<InAppAI
  agentId="your-agent-id"
  messages={messages}
  onMessagesChange={setMessages}

  // Start with a base theme (optional)
  theme="light"

  // Override with your brand styles
  customStyles={{
    // Primary branding
    primaryColor: '#6366f1',
    primaryGradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',

    // Chat button
    buttonBackgroundColor: '#6366f1',
    buttonTextColor: '#ffffff',
    buttonSize: '60px',
    buttonBorderRadius: '50%',
    buttonIcon: '💬',

    // Chat window
    windowWidth: '420px',
    windowHeight: '650px',
    windowBorderRadius: '16px',

    // Header
    headerBackground: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    headerTextColor: '#ffffff',
    headerTitle: 'Support Assistant',
    headerSubtitle: 'How can we help?',

    // Message bubbles
    userMessageBackground: '#6366f1',
    userMessageColor: '#ffffff',
    assistantMessageBackground: '#f3f4f6',
    assistantMessageColor: '#1f2937',

    // Input area
    inputBackground: '#ffffff',
    inputTextColor: '#1f2937',
    inputBorderColor: '#e5e7eb',
    inputPlaceholder: 'Type your message...',

    // Typography
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto',
    fontSize: '15px',

    // Sidebar (for sidebar mode)
    sidebarWidth: '380px',
    sidebarFoldedWidth: '60px',

    // General
    borderRadius: '12px',
    boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
  }}
/>

Common Customizations

Change Button Icon

customStyles={{
  buttonIcon: '🤖',  // Any emoji or text
  buttonSize: '64px',
}}

Brand Colors

customStyles={{
  primaryColor: '#ff6b6b',
  buttonBackgroundColor: '#ff6b6b',
  userMessageBackground: '#ff6b6b',
}}

Custom Header

customStyles={{
  headerTitle: 'Customer Support',
  headerSubtitle: 'We reply in minutes',
  headerBackground: 'linear-gradient(to right, #667eea, #764ba2)',
  headerTextColor: '#ffffff',
}}

Typography

customStyles={{
  fontFamily: '"Inter", sans-serif',
  fontSize: '16px',
}}

Window Size

customStyles={{
  windowWidth: '500px',
  windowHeight: '700px',
  windowBorderRadius: '20px',
}}

For sidebar-left or sidebar-right display modes:

customStyles={{
  sidebarWidth: '450px',
  sidebarFoldedWidth: '60px',  // When collapsed
}}

Mixing Themes and Custom Styles

You can use a built-in theme as a base and override specific properties:

<InAppAI
  theme="dark"  // Start with dark theme
  customStyles={{
    // Override just the accent color
    primaryColor: '#f59e0b',
    buttonBackgroundColor: '#f59e0b',
    userMessageBackground: '#f59e0b',
  }}
/>

This approach gives you the polish of a complete theme while allowing brand customization.

Responsive Design

All themes and custom styles are responsive by default. The component automatically adjusts:

Mobile: Full-screen chat on small screens
Tablet: Smaller window size, adjusted sidebar width
Desktop: Full custom dimensions

To customize responsive behavior, use CSS media queries in your app:

@media (max-width: 768px) {
  /* Your responsive overrides */
}

Examples

E-Commerce Brand

<InAppAI
  theme="light"
  customStyles={{
    buttonIcon: '🛍️',
    primaryColor: '#10b981',
    headerTitle: 'Shopping Assistant',
    headerBackground: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
  }}
/>

Developer Tool

<InAppAI
  theme="dark"
  customStyles={{
    buttonIcon: '⚡',
    fontFamily: '"Fira Code", monospace',
    headerTitle: 'AI Assistant',
  }}
/>

Corporate Dashboard

<InAppAI
  theme="professional"
  customStyles={{
    buttonIcon: '💼',
    primaryColor: '#2563eb',
    headerTitle: 'Enterprise Support',
    headerSubtitle: 'Available 24/7',
  }}
/>

Best Practices

Start with a theme - Use built-in themes as a base, override only what you need
Maintain contrast - Ensure text is readable on all backgrounds
Be consistent - Match your app’s design system
Test on mobile - Verify appearance on different screen sizes
Use gradients sparingly - They can be powerful but shouldn’t overwhelm

Next Steps

Display Modes - Choose the right layout
Customization - Advanced styling techniques
API Reference - Complete style reference

Documentation