Theming

The Lovina Chat SDK is designed to blend into your brand. You can go from a one-line color change to a fully custom branded experience.

One-Color Theming

The fastest way to brand the widget. Set primaryColor and the SDK generates an entire coordinated palette automatically.

window.lovinaSettings = {
  theme: {
    primaryColor: '#6366F1', // Your brand color
  },
};

The auto-generated palette includes: primary text, background, agent bubble, user bubble, input, border, and launcher bubble colors -- all with WCAG AA contrast ratios (4.5:1 minimum).

How Auto-Generation Works

The SDK's generatePalette() function:

1. Converts your primaryColor to HSL.
2. Determines whether the color is light or dark based on luminance.
3. Generates complementary colors for all UI surfaces.
4. Validates every color pair against WCAG AA contrast requirements.

For example, setting primaryColor: '#FF6B00' automatically produces appropriate text colors for orange surfaces, a warm-tinted background, and coordinated bubble colors.

Full Custom Theme

For pixel-perfect control, override individual colors:

window.lovinaSettings = {
  theme: {
    primaryColor: '#6366F1',
    primaryTextColor: '#FFFFFF',
    backgroundColor: '#FAFAFA',
    agentBubbleColor: '#F3F4F6',
    agentBubbleTextColor: '#1F2937',
    userBubbleColor: '#6366F1',
    userBubbleTextColor: '#FFFFFF',
    textColor: '#1A1A1A',
    secondaryTextColor: '#6B7280',
    inputColor: '#FFFFFF',
    borderColor: '#E5E7EB',
    fontFamily: 'Inter, system-ui, sans-serif',
    fontSize: 14,
    borderRadius: 16,
    bubbleRadius: 18,
    buttonRadius: 8,
    bubbleSize: 60,
    bubbleColor: '#6366F1',
    bubbleIconColor: '#FFFFFF',
    bubbleShadow: true,
  },
};

CSS Variable Overrides

The widget applies theme colors as CSS custom properties. These are the variables set internally:

:root {
  --lv-primary-900: #1B2E1F;
  --lv-primary-700: #2D4A32;
  --lv-primary-500: #3D6B45;
  --lv-primary-400: #4A8B55;
  --lv-primary-100: #E8F5E9;
  --lv-primary-50:  #F1F8F2;

  --lv-bg-white: #FFFFFF;
  --lv-bg-warm:  #FAFAF7;
  --lv-bg-cream: #F5F5F0;

  --lv-gray-900: #1A1A1A;
  --lv-gray-500: #6B7280;
  --lv-gray-200: #E5E5E0;
  --lv-gray-50:  #F5F5F0;

  --lv-font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lv-radius-sm: 8px;
  --lv-radius-md: 12px;
  --lv-radius-lg: 16px;
}

When you set a primaryColor in the theme config, these variables are overridden to match your brand.

Dark Mode

Configuration

Enable dark mode via the darkMode setting:

window.lovinaSettings = {
  darkMode: 'dark',   // Always dark
  // or
  darkMode: 'auto',   // Follow OS preference via prefers-color-scheme
};

Runtime Toggle

Switch color scheme programmatically:

window.$lovina.setColorScheme('dark');
window.$lovina.setColorScheme('light');
window.$lovina.setColorScheme('auto');

Dark Mode Palette

In dark mode, the SDK applies a coordinated dark palette:

Element	Light	Dark
Background	#FFFFFF	#0F1117
Card / warm bg	#FAFAF7	#1A1D27
Input	#F5F5F0	#252836
Primary text	#1A1A1A	#F9FAFB
Secondary text	#6B7280	#9CA3AF
Border	#E5E5E0	#2D3142
Agent bubble	#F5F5F0	#252836

Branding Options

Custom Logo and Name

Replace the default header branding:

window.lovinaSettings = {
  branding: {
    brandName: 'Acme Support',
    logoUrl: 'https://example.com/logo.svg',
  },
};

Custom Bubble Icon

Replace the default chat icon on the launcher bubble:

window.lovinaSettings = {
  branding: {
    bubbleIconUrl: 'https://example.com/your-icon.svg',
  },
};

The icon should be SVG or PNG, ideally 24x24 or 32x32 px, with a transparent background.

Remove "Powered by" Branding

For a fully white-labeled experience:

window.lovinaSettings = {
  branding: {
    poweredBy: false,
  },
};

Preset Themes

The SDK ships with 8 built-in color presets as reference palettes:

Preset	Primary Color	Description
lovina	#1B2E1F	Default deep green
midnight	#1E293B	Dark slate blue
ocean	#0369A1	Professional blue
coral	#BE185D	Vibrant pink
emerald	#059669	Fresh green
amber	#D97706	Warm amber
violet	#7C3AED	Rich purple
slate	#475569	Neutral gray

To use a preset's color:

window.lovinaSettings = {
  theme: {
    primaryColor: '#0369A1', // Ocean preset
  },
};

Complete White-Label Example

A fully branded widget with no trace of Lovina's default branding:

window.lovinaSettings = {
  branding: {
    brandName: 'Acme Help Desk',
    logoUrl: 'https://example.com/acme-logo.svg',
    bubbleIconUrl: 'https://example.com/acme-icon.svg',
    faviconUrl: 'https://example.com/favicon.ico',
    poweredBy: false,
  },
  theme: {
    primaryColor: '#FF6B00',
    fontFamily: 'Inter, sans-serif',
    borderRadius: 12,
    bubbleSize: 56,
  },
  texts: {
    header: { title: 'Acme Help' },
    welcome: {
      title: 'Welcome!',
      message: 'How can we assist you today?',
    },
    input: { placeholder: 'Type your question...' },
  },
};