Theming Guide

// Start with default theme (embedded, no loading time)
const signSure = SignSure.create({
    container: '#pdf-container',
    licenseKey: 'your-license-key',
    theme: 'default'
});

// Start with dark theme (loaded dynamically)
const signSure = SignSure.create({
    container: '#pdf-container',
    licenseKey: 'your-license-key',
    theme: 'dark'
});

// Start with minimal theme (loaded dynamically)
const signSure = SignSure.create({
    container: '#pdf-container',
    licenseKey: 'your-license-key',
    theme: 'minimal'
});

// Switch to dark theme
await signSure.switchTheme('dark');

// Switch to minimal theme
await signSure.switchTheme('minimal');

// Switch back to default theme
await signSure.switchTheme('default');

// Get current theme
const currentTheme = signSure.getCurrentTheme();
console.log('Current theme:', currentTheme);

// Preload themes for better performance
await signSure.preloadThemes(['dark', 'minimal']);

// Now theme switching is instant
await signSure.switchTheme('dark'); // No loading time

// Check if theme is loaded
const isLoaded = signSure.themeManager.isThemeLoaded('dark');
console.log('Dark theme loaded:', isLoaded);

// Enable auto theme switching
await signSure.enableAutoTheme({
    dark: 'dark',    // Use dark theme when system prefers dark
    light: 'default' // Use default theme when system prefers light
});

// Check system color scheme
const themeManager = SignSure.getThemeManager();
const systemScheme = themeManager.getSystemColorScheme();
console.log('System prefers:', systemScheme); // 'dark', 'light', or 'no-preference'

// Listen for theme changes on SignSure instance
signSure.on('theme-changed', (event) => {
    console.log(`Theme changed to: ${event.theme}`);
});

// Listen for detailed theme events
const themeManager = SignSure.getThemeManager();
const unsubscribe = themeManager.onThemeChange((event, data) => {
    switch (event) {
        case 'theme-changed':
            console.log(`Theme changed from ${data.from} to ${data.to}`);
            break;
        case 'theme-loaded':
            console.log(`Theme loaded: ${data.theme}`);
            break;
        case 'theme-load-error':
            console.error(`Failed to load theme: ${data.theme}`, data.error);
            break;
    }
});

// Unsubscribe when no longer needed
unsubscribe();

/* Override theme colors with CSS variables */
.signsure-container {
    --signsure-primary: #6366f1;
    --signsure-primary-dark: #4f46e5;
    --signsure-background: #ffffff;
    --signsure-surface: #f8fafc;
    --signsure-border: #e2e8f0;
    --signsure-text: #1e293b;
    --signsure-text-secondary: #64748b;
    --signsure-border-radius: 0.5rem;
    --signsure-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* Field-specific styling */
.signsure-field {
    --signsure-field-border: 2px solid var(--signsure-primary);
    --signsure-field-background: rgba(99, 102, 241, 0.05);
    --signsure-field-hover-background: rgba(99, 102, 241, 0.1);
    --signsure-field-selected-background: rgba(99, 102, 241, 0.15);
}

// Switch to dark theme
signSure.setTheme('dark');

// Switch to custom theme
signSure.setTheme({
    name: 'corporate',
    colors: {
        primary: '#dc2626',
        primaryDark: '#b91c1c',
        background: '#fef2f2'
    }
});

// Listen for theme changes
signSure.on('theme:changed', (theme) => {
    console.log('Theme changed to:', theme.name);
});

// Example: Corporate brand theme
const corporateTheme = {
    name: 'corporate',
    colors: {
        primary: '#1a365d',      // Navy blue
        primaryDark: '#2a4365',  // Darker navy
        secondary: '#e53e3e',    // Red accent
        success: '#38a169',      // Green
        warning: '#d69e2e',      // Orange
        error: '#e53e3e',        // Red
        background: '#ffffff',
        surface: '#f7fafc',
        border: '#e2e8f0',
        text: '#2d3748',
        textSecondary: '#4a5568'
    },
    fonts: {
        primary: 'Corporate Sans, Arial, sans-serif',
        mono: 'Courier New, monospace'
    }
};

// Get available themes
const availableThemes = signSure.getAvailableThemes();
console.log('Available themes:', Object.keys(availableThemes));

// Switch themes dynamically
document.getElementById('theme-selector').addEventListener('change', async (e) => {
    const themeName = e.target.value;
    const success = await signSure.switchTheme(themeName);

    if (success) {
        console.log(`Switched to ${themeName} theme`);
    } else {
        console.error(`Failed to switch to ${themeName} theme`);
    }
});

// Preload themes for instant switching
await signSure.preloadThemes(['dark', 'minimal']);

// Check loading status
const themeManager = SignSure.getThemeManager();
console.log('Dark theme loaded:', themeManager.isThemeLoaded('dark'));
console.log('Minimal theme loaded:', themeManager.isThemeLoaded('minimal'));

// Clean up unused themes to save memory
themeManager.cleanupThemes(['dark']); // Keep only current theme + dark theme

// Enable auto theme switching
await signSure.enableAutoTheme({
    dark: 'dark',    // Use dark theme when system prefers dark mode
    light: 'default' // Use default theme when system prefers light mode
});

// Manual system detection
const themeManager = SignSure.getThemeManager();
const systemScheme = themeManager.getSystemColorScheme();

switch (systemScheme) {
    case 'dark':
        await signSure.switchTheme('dark');
        break;
    case 'light':
        await signSure.switchTheme('default');
        break;
    default:
        console.log('No system preference detected');
}

// Listen on SignSure instance (basic events)
signSure.on('theme-changed', (event) => {
    console.log(`Theme changed to: ${event.theme}`);
    updateUIForTheme(event.theme);
});

// Listen on theme manager (detailed events)
const themeManager = SignSure.getThemeManager();
const unsubscribe = themeManager.onThemeChange((event, data) => {
    switch (event) {
        case 'theme-changed':
            console.log(`Theme: ${data.from} → ${data.to}`);
            break;
        case 'theme-loaded':
            console.log(`Loaded: ${data.theme}`);
            showThemeLoadedNotification(data.theme);
            break;
        case 'theme-load-error':
            console.error(`Load error: ${data.theme}`, data.error);
            showErrorNotification(`Failed to load ${data.theme} theme`);
            break;
        case 'system-theme-change':
            console.log(`System theme changed: ${data.prefersDark ? 'dark' : 'light'}`);
            break;
    }
});

// Cleanup
window.addEventListener('beforeunload', () => {
    unsubscribe();
});

// Get global theme manager
const themeManager = SignSure.getThemeManager();

// Switch themes globally (affects all instances)
await themeManager.switchTheme('dark');

// Get theme information
const currentTheme = themeManager.getCurrentTheme();
const availableThemes = themeManager.getAvailableThemes();
const loadedThemes = Array.from(themeManager.loadedThemes);

console.log('Current:', currentTheme);
console.log('Available:', Object.keys(availableThemes));
console.log('Loaded:', loadedThemes);

// Preload themes globally
const results = await themeManager.preloadThemes(['dark', 'minimal']);
console.log('Preload results:', results);