Some test text!

Customizing styles

Contents

Changing color theme
setTheme API
CSS variables
Changing other CSS properties

WebViewer UI supports style customizations using an API and CSS file.

linkChanging 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.

linksetTheme API

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

linkCSS variables

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

Example

const viewerElement = document.getElementById('viewer');
const viewerInstance = new PDFTron.WebViewer({
  l: 'YOUR_LICENSE_KEY',
  path: 'lib',
  css: 'path/to/stylesheet.css'
}, viewerElement);
:root {
  --primary-color: #1C242E;
  --secondary-color: #6F8BA7;
  --text-color: #FFFFFF;
  --button-hover-color: #414C59;
  --button-active-color: #414C59;
  --icon-color: #FFFFFF;
}

linkChanging 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, WebViewer UI provides 5 top level classes:

  • Button
  • Panel
  • Overlay
  • Popup
  • Modal

Example

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

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

Get the answers you need: Support

Contents

Changing color theme
setTheme API
CSS variables
Changing other CSS properties