Custom Styling

Customize the Quadrillian appearance to match your brand identity. You can modify colors, fonts, spacing, and other visual elements to create a seamless integration with your website.

Theme System: Quadrillian uses CSS custom properties (variables) that can be dynamically updated via JavaScript to match your brand colors and styling preferences.

Theme Variables

Quadrillian supports a comprehensive set of CSS custom properties that control the visual appearance:

Color Variables

--primary-color - Main brand color for buttons and links
--background-color - Main background color
--text-color - Primary text color
--text-secondary - Secondary text color
--border-color - Border and divider colors
--input-background - Input field background

Spacing & Layout

--border-radius - Corner radius for buttons and containers
--spacing-sm - Small spacing (4px)
--spacing-md - Medium spacing (8px)
--spacing-lg - Large spacing (16px)
--spacing-xl - Extra large spacing (24px)

Typography

--font-family - Font family for text
--font-size-base - Base font size
--font-size-sm - Small font size
--font-size-lg - Large font size
--font-weight-normal - Normal font weight
--font-weight-bold - Bold font weight

Applying Themes

You can apply custom themes using JavaScript to communicate with the Quadrillian iframe:

Basic Theme Application

// Apply custom theme to Quadrillian iframe
const iframe = document.getElementById('abchat-iframe');

iframe.contentWindow.postMessage({
  type: 'SET_THEME',
  theme: {
    '--primary-color': '#your-brand-color',
    '--background-color': '#ffffff',
    '--text-color': '#333333',
    '--border-radius': '8px'
  }
}, 'https://quadrillian.com');
                    

Dynamic Theme Updates

// Update theme dynamically based on user preferences
function updateChatTheme(isDarkMode) {
  const iframe = document.getElementById('abchat-iframe');
  
  const theme = isDarkMode ? {
    '--primary-color': '#4a9eff',
    '--background-color': '#1a1a1a',
    '--text-color': '#ffffff',
    '--border-color': '#333333'
  } : {
    '--primary-color': '#007bff',
    '--background-color': '#ffffff',
    '--text-color': '#333333',
    '--border-color': '#e0e0e0'
  };
  
  iframe.contentWindow.postMessage({
    type: 'SET_THEME',
    theme: theme
  }, 'https://quadrillian.com');
}
                    

Brand Examples

Here are some example theme configurations for popular brand colors:

Tech Company (Blue Theme)

const techTheme = {
  '--primary-color': '#0066cc',
  '--background-color': '#ffffff',
  '--text-color': '#1a1a1a',
  '--text-secondary': '#666666',
  '--border-color': '#e1e5e9',
  '--border-radius': '6px',
  '--font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
};
                    

Creative Agency (Purple Theme)

const creativeTheme = {
  '--primary-color': '#8b5cf6',
  '--background-color': '#fafafa',
  '--text-color': '#2d2d2d',
  '--text-secondary': '#6b7280',
  '--border-color': '#e5e7eb',
  '--border-radius': '12px',
  '--font-family': '"Inter", -apple-system, sans-serif'
};
                    

E-commerce (Green Theme)

const ecommerceTheme = {
  '--primary-color': '#10b981',
  '--background-color': '#ffffff',
  '--text-color': '#111827',
  '--text-secondary': '#6b7280',
  '--border-color': '#d1d5db',
  '--border-radius': '8px',
  '--font-family': '"Poppins", sans-serif'
};
                    

Responsive Design

Quadrillian automatically adapts to different screen sizes, but you can customize the responsive behavior:

Mobile-First Theme

// Optimize theme for mobile devices
function applyMobileTheme() {
  const isMobile = window.innerWidth < 768;
  
  const mobileTheme = {
    '--spacing-sm': '8px',
    '--spacing-md': '12px',
    '--spacing-lg': '20px',
    '--font-size-base': '16px',
    '--border-radius': '12px'
  };
  
  if (isMobile) {
    updateChatTheme(mobileTheme);
  }
}
                    

Best Practices

Follow these guidelines for effective chat styling:

Color Accessibility

Contrast Ratio: Ensure text has sufficient contrast against background colors (WCAG AA: 4.5:1)
Color Blindness: Don't rely solely on color to convey information
Brand Consistency: Use colors that align with your existing brand palette

Typography

Readability: Choose fonts that are easy to read at small sizes
Font Loading: Use web-safe fonts or ensure custom fonts load quickly
Line Height: Maintain adequate line spacing for readability

Performance

Theme Updates: Apply themes after the iframe has loaded
Minimal Changes: Only update the CSS variables you need to change
Debouncing: Debounce rapid theme changes to avoid performance issues

Important: Always test your custom themes across different devices and browsers to ensure consistent appearance and functionality.