PDF Web Viewer
    Preparing search index...

    Theme

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

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

    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), and keeps following it as the OS changes

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

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

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

    customStyles ( index.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',
        },
      },
    });

    Rules:

    • Keys must carry the --pwv- prefix. Keys without it are ignored.
    • Keys are typed: index.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.

    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',
      },
    },

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

    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.

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

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

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

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

    Settings

    Member Visibility

    On This Page

    Theme