Theme

Control the visual theme and color scheme of the PDF Web Viewer. The index.IThemeConfig interface provides comprehensive theme customization options.

themeConfig

Configure the overall visual appearance using predefined pallets or custom color schemes.

Theme Pallets

Choose from predefined theme pallets:

import { PdfEditor } from '@avanquest/pdf-web-viewer';

// Light theme (default)
const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  themeConfig: {
    pallet: 'light',
  },
});

Available pallets:

'light' - Light theme with bright backgrounds (default)
'dark' - Dark theme with dark backgrounds
'system' - Follows OS preference (light/dark)
'custom' - Custom color scheme (requires customProperties)

Light Theme

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  themeConfig: {
    pallet: 'light',
  },
});

Dark Theme

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  themeConfig: {
    pallet: 'dark',
  },
});

System Theme

Automatically follow the user's operating system theme preference:

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  themeConfig: {
    pallet: 'system', // Switches between light/dark based on OS
  },
});

Custom Theme Properties

When using pallet: 'custom', define custom colors for each UI component using the index.CustomThemePallet interface:

import { PdfEditor } from '@avanquest/pdf-web-viewer';

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  themeConfig: {
    pallet: 'custom',
    customProperties: {
      main: {
        'primary-background': '#FFFFFF',
        'secondary-background': '#F5F5F5',
        'panel-background': '#FAFAFA',
        'document-background': '#E0E0E0',
        'menu-background': '#FFFFFF',
        'primary-color': '#212121',
        'secondary-color': '#757575',
      },
      toolbar: {
        'primary-background': '#1976D2',
        'secondary-background': '#1565C0',
        'primary-color': '#FFFFFF',
        'secondary-color': '#E3F2FD',
      },
      topBar: {
        'primary-background': '#FAFAFA',
        'secondary-background': '#EEEEEE',
        'primary-color': '#424242',
        'secondary-color': '#616161',
      },
      buttons: {
        'primary-background': '#1976D2',
        'secondary-background': '#E3F2FD',
        'primary-color': '#FFFFFF',
        'secondary-color': '#1976D2',
      },
      dialog: {
        'primary-background': '#FFFFFF',
        'secondary-background': '#F5F5F5',
        'primary-color': '#212121',
        'secondary-color': '#757575',
      },
      components: {
        'primary-background': '#FFFFFF',
        'secondary-background': '#F5F5F5',
        'primary-color': '#424242',
        'secondary-color': '#757575',
      },
    },
  },
});

Custom Properties Structure

Component areas:

main - Overall application background and text colors
- primary-background - Main background color
- secondary-background - Secondary surfaces
- panel-background - Panel backgrounds
- document-background - Document canvas background
- menu-background - Menu backgrounds
- primary-color - Primary text color
- secondary-color - Secondary text color
toolbar - Header navigation bar
- primary-background - Toolbar background
- secondary-background - Toolbar hover/active states
- primary-color - Toolbar text/icons
- secondary-color - Toolbar secondary text
topBar - Top control bar
- primary-background - Control bar background
- secondary-background - Button backgrounds
- primary-color - Primary text
- secondary-color - Secondary text
buttons - Button styling
- primary-background - Primary button background
- secondary-background - Secondary button background
- primary-color - Button text color
- secondary-color - Button secondary color
dialog - Modal dialog styling
- primary-background - Dialog background
- secondary-background - Dialog sections
- primary-color - Dialog text
- secondary-color - Dialog secondary text
components - UI components (dropdowns, inputs, etc.)
- primary-background - Component backgrounds
- secondary-background - Component hover/focus
- primary-color - Component text
- secondary-color - Component hints/placeholders

Dynamic Updates with setTheme()

Switch themes at runtime:

const viewer = editor.ui.pdfWebElement;

// Switch to dark theme
viewer.setTheme({
  pallet: 'dark',
});

// Switch to light theme
viewer.setTheme({
  pallet: 'light',
});

// Apply custom theme
viewer.setTheme({
  pallet: 'custom',
  customProperties: {
    main: {
      'primary-background': '#1E1E1E',
      'primary-color': '#E0E0E0',
    },
    // ... other component colors
  },
});

Complete Examples

Corporate Blue Theme

import { PdfEditor } from '@avanquest/pdf-web-viewer';

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  themeConfig: {
    pallet: 'custom',
    customProperties: {
      main: {
        'primary-background': '#F5F9FC',
        'secondary-background': '#EBF4F9',
        'primary-color': '#1C3D5A',
        'secondary-color': '#5B7B94',
      },
      toolbar: {
        'primary-background': '#004E89',
        'secondary-background': '#003D6B',
        'primary-color': '#FFFFFF',
        'secondary-color': '#A8D5E5',
      },
      buttons: {
        'primary-background': '#0066B3',
        'secondary-background': '#E6F2F9',
        'primary-color': '#FFFFFF',
        'secondary-color': '#0066B3',
      },
      dialog: {
        'primary-background': '#FFFFFF',
        'secondary-background': '#F5F9FC',
        'primary-color': '#1C3D5A',
        'secondary-color': '#5B7B94',
      },
    },
  },
});

Modern Dark Theme

import { PdfEditor } from '@avanquest/pdf-web-viewer';

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  themeConfig: {
    pallet: 'custom',
    customProperties: {
      main: {
        'primary-background': '#1E1E1E',
        'secondary-background': '#2D2D2D',
        'panel-background': '#252525',
        'document-background': '#121212',
        'primary-color': '#E0E0E0',
        'secondary-color': '#A0A0A0',
      },
      toolbar: {
        'primary-background': '#0D0D0D',
        'secondary-background': '#1A1A1A',
        'primary-color': '#FFFFFF',
        'secondary-color': '#B0B0B0',
      },
      topBar: {
        'primary-background': '#2D2D2D',
        'secondary-background': '#3D3D3D',
        'primary-color': '#E0E0E0',
        'secondary-color': '#A0A0A0',
      },
      buttons: {
        'primary-background': '#4A90E2',
        'secondary-background': '#2D4A6B',
        'primary-color': '#FFFFFF',
        'secondary-color': '#4A90E2',
      },
      dialog: {
        'primary-background': '#2D2D2D',
        'secondary-background': '#252525',
        'primary-color': '#E0E0E0',
        'secondary-color': '#A0A0A0',
      },
      components: {
        'primary-background': '#3D3D3D',
        'secondary-background': '#4D4D4D',
        'primary-color': '#E0E0E0',
        'secondary-color': '#A0A0A0',
      },
    },
  },
});

User Preference Theme Switcher

import { PdfEditor } from '@avanquest/pdf-web-viewer';

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  themeConfig: {
    pallet: 'system', // Start with system preference
  },
});

const viewer = editor.ui.pdfWebElement;

// User manually selects theme
function switchTheme(theme: 'light' | 'dark' | 'system') {
  viewer.setTheme({ pallet: theme });

  // Save user preference
  localStorage.setItem('themePreference', theme);
}

// Restore saved preference on load
const savedTheme = localStorage.getItem('themePreference');
if (savedTheme) {
  viewer.setTheme({ pallet: savedTheme as any });
}

High Contrast Theme

import { PdfEditor } from '@avanquest/pdf-web-viewer';

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  themeConfig: {
    pallet: 'custom',
    customProperties: {
      main: {
        'primary-background': '#FFFFFF',
        'secondary-background': '#F0F0F0',
        'primary-color': '#000000',
        'secondary-color': '#333333',
      },
      toolbar: {
        'primary-background': '#000000',
        'secondary-background': '#1A1A1A',
        'primary-color': '#FFFFFF',
        'secondary-color': '#FFFF00',
      },
      buttons: {
        'primary-background': '#000000',
        'secondary-background': '#FFFF00',
        'primary-color': '#FFFFFF',
        'secondary-color': '#000000',
      },
    },
  },
});

Reference

index.IThemeConfig - Theme configuration interface
index.CustomThemePallet - Custom theme properties interface
index.IDocumentViewerWrapperElement.setTheme - Dynamic theme updates
Branding Configuration - Company identity and logos