Theming

Give the viewer your brand color, and every part follows it: pressed buttons, the active tab, focus rings, the text selection, the handles of a selected annotation.

{
  theme: { preference: 'system', accent: '#7c3aed' },
}

preference is 'light', 'dark' or 'system', which follows the user’s setting and switches when they change it. theme: 'dark' is short for theme: { preference: 'dark' }. theme follows its prop, so a theme switch in your app switches the viewer too.

Every color#

Change any of them with tokens for both light and dark, with light for light only, and with dark for dark only:

{
  theme: {
    accent: '#0f6e56',
    tokens: { radius: '2px' },
    light: { surface: '#fbfaf7' },
    dark: { surface: '#16201c', 'page-shadow': 'none' },
  },
}

When more than one sets a token, light or dark wins in its mode, then tokens, then accent. A CSS variable wins over all of them: see From CSS.

This one gives each color its light value in light and its dark value in dark, and a switch in the app sets preference:

<link rel="stylesheet" href="./colors.css" />

<div class="app" id="app">
  <header class="bar">
    <label>
      <input type="checkbox" id="dark" />
      Dark
    </label>
  </header>
  <embedpdf-viewer id="viewer" class="viewer"></embedpdf-viewer>
</div>

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@embedpdf/viewer@3/dist/embedpdf.js';

  const welcome = '/pdfs/welcome.pdf';

  // What both modes share, then the colors of each.
  const brand = {
    accent: '#0f6e56',
    tokens: { radius: '2px' },
    light: { surface: '#fbfaf7', canvas: '#ece8df' },
    dark: {
      accent: '#4fbf98',
      surface: '#16201c',
      'surface-raised': '#1d2a25',
      canvas: '#0c1210',
      hover: '#24332d',
    },
  };

  const app = document.getElementById('app');
  const viewer = document.getElementById('viewer');
  const dark = document.getElementById('dark');

  // Your app and the viewer, light or dark as the switch says.
  const show = () => {
    app.classList.toggle('dark', dark.checked);
    viewer.theme = { ...brand, preference: dark.checked ? 'dark' : 'light' };
  };

  viewer.config = { src: welcome };
  show();
  dark.addEventListener('change', show);
</script>

Try it: tick Dark above the viewer, then open the menu at the top left: the bars, the menus and the space behind the pages all take your dark colors. Untick it to go back.

What’s drawn on the pages has its own colors: the text selection, search matches, the handles of a selected annotation, form fields. Every one follows accent until you set it, and every one is listed on Colors & theming in the headless docs, as a plugin setting and a CSS variable. Both work in the viewer.

From CSS#

Every token is also a CSS variable: --epdf- and its name. Set it on the viewer or on any element around it. A CSS variable wins over the config:

embedpdf-viewer {
  --epdf-accent: #e91e63;
  --epdf-radius: 0;
}
 
[data-theme='dark'] embedpdf-viewer {
  --epdf-surface: #101418;
}

Use it to keep colors in your stylesheet, to follow a theme class your app already switches, or to give two viewers on one page their own look.

Restyle a part#

The main parts have a name you can reach with ::part(), for what tokens don’t cover:

embedpdf-viewer::part(toolbar-button) {
  border-radius: 999px;
}
 
embedpdf-viewer::part(mode-tab-active) {
  font-weight: 600;
}
 
embedpdf-viewer::part(toolbar-review) {
  background: #fef3c7;
}

Part names are kept between minor versions, like every other id.

In your own components#

Your own components inherit the viewer’s font and text color, and can use every token as a CSS variable:

.version-picker {
  background: var(--epdf-surface);
  color: var(--epdf-text);
  border: 1px solid var(--epdf-border);
  border-radius: var(--epdf-radius);
}

Good to know#

Your page’s CSS stays out#

The viewer draws inside its own shadow DOM, so your page’s styles don’t change it and its styles don’t change your page. A global button { … } rule, a CSS reset, or html { font-size: 62.5% } leaves the viewer as it is. What does reach it is what you aim at it: the CSS variables above and ::part().

Tailwind#

Set a variable with an arbitrary property on an element around the viewer: class="[--epdf-accent:var(--color-violet-600)]".

Colors saved in the PDF#

An annotation’s color, a redaction’s fill and a form field’s look belong to the document, not to the theme: they look the same in every app that opens the file. Their defaults are the tools’ settings: see Annotations.