Customizing styles

In this document
chevron_rightConstructor option
chevron_rightTop level classes
chevron_rightDark theme example

WebViewer UI supports style customizations using a css file. You can create your own stylesheet and apply it directly to the app.

linkConstructor option

To apply your custom css stylesheet, you must pass it into the WebViewer constructor.

Example

const viewerElement = document.getElementById('viewer');
const viewerInstance = new PDFTron.WebViewer({
  l: 'YOUR_LICENSE_KEY',
  path: 'lib',
  ui: 'beta',
  css: 'path/to/stylesheet.css'
}, viewerElement);

linkTop level classes

To make the customization easier and consistent, WebViewer UI provides 5 top level classes:

  • Button
  • Panel
  • Overlay
  • Popup
  • Modal

Example

.Button.Icon {
  color: red;
}

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

Or, you can customize individual elements with their class names,

.LeftPanel {
  background-color: blue;
}

linkDark theme example

.App {
  background-color: #405975;
  color: #ffffff;
}

.Header {
  background-color: #222f3e;
  border-bottom: none;
}

.Panel {
  background-color: #34485f;
}

.Overlay {
  background-color: #222f3e;
  border: none;
}

.Popup {
  background-color: #222f3e;
}

.Modal .Button .Icon,
.PrintModal {
  color: #757575;
}

.Button.active, 
.Button:hover {
  background-color: #6182a9;
}

.StylePopup .sliders-container,
.StylePopup .colors-container {
  background-color: #405975;
}

.Button .Icon, 
.Thumbnail .page-number, 
.Dropdown .items, 
.ListSeparator,
.PageNavOverlay input {
  color: #ffffff;
}