Theme

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

themeConfig

Pick a base pallet, then optionally override individual colors with customStyles.

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',
  },
});
Copy

Available pallets:

• 'light' - Light theme with bright backgrounds (default)
• 'dark' - Dark theme with dark backgrounds
• 'system' - Follows OS preference (light/dark), and keeps following it as the OS changes

There is no separate "custom" pallet: any pallet can be recolored through customStyles.

Dark Theme

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

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
  },
});
Copy

Custom Styles

customStyles ( ui.CustomThemePallet) is a flat map of design-token overrides applied on top of the resolved pallet. Keys are the full CSS custom property names, exactly as they appear in the DOM:

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

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  themeConfig: {
    pallet: 'light',
    customStyles: {
      '--pwv-btn-choose-file-background-default': '#FF00FF',
      '--pwv-panel-background-default': '#FAFAFA',
      '--pwv-document-background-default': '#E0E0E0',
    },
  },
});
Copy

Rules:

• Keys must carry the --pwv- prefix. Keys without it are ignored.
• Keys are typed: ui.CustomThemePallet is derived from the palette itself, so every real token autocompletes and a typo is a compile error.
• Values are plain CSS values — hex (#RRGGBB), hex with alpha (#RRGGBBAA), rgb(), gradients, and so on.
• Overrides are independent of the base pallet. If the user switches theme in the Settings dialog, they re-apply on top of the new pallet.

Interactive states come for free

Recolour {prefix}-background-default and the viewer derives the matching -hover, -active and -disabled from it, using the same lightness relationship the built-in buttons use. Pass a state yourself to keep it exactly as given.

themeConfig: {
  pallet: 'light',
  customStyles: {
    // hover / active / disabled are derived from this one colour
    '--pwv-btn-choose-file-background-default': '#FF00FF',
  },
},
Copy

Derivation is skipped for values it cannot shift (gradients, rgb(), …) — pass those states explicitly.

Finding token names

Every themable color is a --pwv-* CSS variable. To find the one behind a given element, inspect it in your browser devtools and look at the var(--pwv-...) the rule resolves to. Common surface and text tokens:

Token	What it colors
--pwv-panel-background-default	Side panels
--pwv-menu-background-default	Dropdown menus
--pwv-document-background-default	Document canvas
--pwv-text-secondary-default	Secondary text
--pwv-text-inverse-default	Text on inverted surfaces

Interactive tokens follow a {component}-{text|icon|background|border}-{state} shape, where state is one of default, hover, focus, active, disabled — for example --pwv-btn-choose-file-background-hover.

Dynamic Updates with setTheme()

Switch themes at runtime:

const viewer = editor.ui.pdfWebElement;

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

// Dark theme with a recolored accent
viewer.setTheme({
  pallet: 'dark',
  customStyles: {
    '--pwv-btn-choose-file-background-default': '#4A90E2',
  },
});
Copy

setTheme() replaces the whole configuration: omit customStyles and previous overrides are dropped along with them.

Complete Examples

Recolored accent on the dark pallet

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

const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY',
  container: document.getElementById('pdf-container'),
  themeConfig: {
    pallet: 'dark',
    customStyles: {
      '--pwv-btn-choose-file-background-default': '#0066B3',
      '--pwv-btn-choose-file-background-hover': '#0077D6',
      '--pwv-document-background-default': '#121212',
    },
  },
});
Copy

User Preference Theme Switcher

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

const BRAND_STYLES = {
  '--pwv-btn-choose-file-background-default': '#0066B3',
};

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

const viewer = editor.ui.pdfWebElement;

// User manually selects theme — pass the brand overrides again so they persist
function switchTheme(theme: ThemeType) {
  viewer.setTheme({ pallet: theme, customStyles: BRAND_STYLES });
  localStorage.setItem('themePreference', theme);
}

// Restore saved preference on load
const savedTheme = localStorage.getItem('themePreference') as ThemeType | null;
if (savedTheme) {
  viewer.setTheme({ pallet: savedTheme, customStyles: BRAND_STYLES });
}
Copy

Reference

• ui.IThemeConfig - Theme configuration interface
• ui.CustomThemePallet - Custom style overrides type (every --pwv-* token)
• ui.PaletteTokenName - Union of all palette token names
• ui.ThemeType - Available pallets
• ui.IDocumentViewerWrapperElement.setTheme - Dynamic theme updates
• Branding Configuration - Company identity and logos