Customize color & style of viewer

PDF.js Express Web Viewer UI supports style customizations using an API and CSS file.

Change color theme

You can change the color theme by either using an API or providing a path to a custom CSS file in the constructor.

setTheme API

CSS variables

The other option is to use a custom stylesheet to define the CSS color variables.

Example

WebViewer({
  licenseKey: 'YOUR_LICENSE_KEY',
  path: 'lib',
  css: 'path/to/stylesheet.css'
}, document.getElementById('viewer'));

:root {
  --primary-color: #1C242E;
  --secondary-color: #6F8BA7;
  --text-color: #FFFFFF;
  --button-hover-color: #414C59;
  --button-active-color: #414C59;
  --icon-color: #FFFFFF;
}

Change other CSS properties

If you want to change more CSS properties, you can use a custom stylesheet to define them using normal CSS selectors.

To make the customization easier and consistent, PDF.js Express UI provides 5 top level classes:

• Button
• Panel
• Overlay
• Popup
• Modal

Example

WebViewer({
  licenseKey: 'YOUR_LICENSE_KEY',
  path: 'lib',
  css: 'path/to/stylesheet.css'
}, document.getElementById('viewer'));

.Button.Icon {
  color: red;
}

.Panel.open {
  transition: all ease 0.5s;
}

Accessing DOM directly

WebViewer({
  // ...
}).then(instance => {
  const iframeDoc = instance.iframeWindow.document;
  const zoomOverlay = iframeDoc.querySelector('[data-element="zoomOverlay"]');
});

WebViewer({
  // ...
}).then(instance => {
  const iframeDoc = instance.UI.iframeWindow.document;
  const zoomOverlay = iframeDoc.querySelector('[data-element="zoomOverlay"]');
});