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, and with dark for dark only:

{
  theme: {
    accent: '#0f6e56',
    tokens: { surface: '#fbfaf7', radius: '2px' },
    dark: { surface: '#16201c' },
  },
}

The pages themselves have their 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;
}

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.