Changing themes & colors using JavaScript

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

Setting WebViewer constructor CSS option

The CSS option allows you to set a css file path while instantiating WebViewer. It's great if you have an external stylesheet file, for example.

Example

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

Using setTheme API

The API allows you to change the theme to another pre-defined theme on the fly. See setTheme for details.

Override CSS variables

Another option is to override CSS color variables. Just like changing the theme, this can be done on the fly (without re-instantiating WebViewer).

Example

JavaScript (SDK v11+)

WebViewer({
  licenseKey: 'YOUR_LICENSE_KEY',
  path: 'lib',
}, document.getElementById('viewer')).then(instance => {
  /* #wc-viewer being the ID of the DOM element containing Webviewer */
  const style = document.querySelector("#wc-viewer").shadowRoot.host.style
  style.setProperty("--faded-text", "red")
});

JavaScript (SDK v8.0+)

WebViewer({
  licenseKey: 'YOUR_LICENSE_KEY',
  path: 'lib',
}, document.getElementById('viewer')).then(instance => {
  const style = instance.UI.iframeWindow.document.documentElement.style;
  style.setProperty(`--primary-button`, 'red');
  style.setProperty(`--primary-button-hover`, 'yellow');
});

JavaScript (SDK v7.0+)

WebViewer({
  licenseKey: 'YOUR_LICENSE_KEY',
  path: 'lib',
}, document.getElementById('viewer')).then(instance => {
  const style = instance.iframeWindow.document.documentElement.style;
  style.setProperty(`--primary-button`, 'red');
  style.setProperty(`--primary-button-hover`, 'yellow');
});

You can find the default css variables for both light theme and dark theme in the github repository.

Other properties

See the customizing styles for more information about customizing other properties.