bettercx-widget/dist/types/services/theme.service.d.ts

Professional AI-powered chat widget for BetterCX platform. Seamlessly integrate intelligent customer support into any website.

/**
 * Theme Service
 * Handles widget theming and CSS custom properties
 */
import { WidgetConfiguration } from '../types/api';
export declare class ThemeService {
    private hostElement;
    private currentTheme;
    constructor(hostElement: HTMLElement);
    /**
     * Detect the language of the website the widget is embedded on
     * Returns 'pl' for Polish, 'en' for English (default)
     */
    detectWebsiteLanguage(): Promise<'pl' | 'en'>;
    /**
     * Detect language using Google Translate API (fallback method)
     */
    private detectLanguageWithGoogleTranslate;
    /**
     * Apply widget configuration to CSS custom properties
     */
    applyConfig(config: WidgetConfiguration, theme?: 'light' | 'dark' | 'auto'): void;
    /**
     * Apply color configuration to CSS custom properties
     */
    private applyColorConfig;
    /**
     * Resolve theme based on preference and system settings
     */
    private resolveTheme;
    /**
     * Universal color scheme detection for any website
     * Checks multiple methods in order of reliability
     */
    private detectWebsiteColorScheme;
    /**
     * Method 1: Detect CSS custom properties
     * Checks for common CSS variables used by frameworks
     */
    private detectCSSTheme;
    /**
     * Method 2: Detect data attributes
     * Common in frameworks like Next.js, Nuxt.js, etc.
     */
    private detectDataTheme;
    /**
     * Method 3: Detect class names
     * Common in Tailwind, Bootstrap, and other frameworks
     */
    private detectClassTheme;
    /**
     * Method 4: Detect meta theme-color
     * Some sites use meta theme-color to indicate dark mode
     */
    private detectMetaTheme;
    /**
     * Method 5: Detect computed styles
     * Analyze background and text colors of the page
     */
    private detectComputedTheme;
    /**
     * Helper: Check if a color is dark
     */
    private isDarkColor;
    /**
     * Helper: Check if a color is light
     */
    private isLightColor;
    /**
     * Helper: Parse color string to RGB
     */
    private parseColor;
    /**
     * Set default theme colors
     */
    setDefaultTheme(): void;
    /**
     * Apply custom CSS properties from host page
     */
    applyCustomProperties(customProperties: Record<string, string>): void;
    /**
     * Listen for system theme changes
     */
    watchSystemTheme(callback: (theme: 'light' | 'dark') => void): () => void;
    /**
     * Watch for website theme changes dynamically
     * This is useful for sites that change themes without page reload
     */
    watchWebsiteTheme(callback: (theme: 'light' | 'dark') => void): () => void;
    /**
     * Get current detected theme
     */
    getCurrentDetectedTheme(): 'light' | 'dark';
    /**
     * Get current applied theme
     */
    getCurrentTheme(): 'light' | 'dark';
}