Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Customize color & style of viewer

The following features are available in:

check

PDF.js Express Viewer

help_outline

PDF.js Express Viewer is a free viewer that has limited capabilities compared to PDF.js Express Pro

check

PDF.js Express Plus

help_outline

PDF.js Express Plus is a paid product that supports annotating, signing, form filling and more

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

The API allows you to change the theme on the fly. See setTheme for details.

The API allows you to change the theme on the fly. See setTheme for details.

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

Dark theme

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's UI will be loaded inside an iframe, so to access the UI DOM elements you can use the iframeWindow property.

WebViewer's UI will be loaded inside an iframe, so to access the UI DOM elements you can use the iframeWindow property.

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