WebViewer UI supports style customizations using an API or through a CSS file.

See this guide for more information about changing the theme.

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

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

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.UI.iframeWindow.document;
  const zoomOverlay = iframeDoc.querySelector('[data-element="zoomOverlay"]');
});