Section:

WebViewer Dark Mode Showcase Demo Code Sample

Requirements
View Demo
Web SDK

Easily add Dark/Light mode toggle in WebViewer.

This demo allows you to:

  • Instantly switch the UI between dark and light modes.
  • Use a single line of code to toggle themes.

Implementation steps

To add Dark/Light UI themes in WebViewer:

Step 1: Get started with WebViewer in your preferred web stack.
Step 2: Add the ES6 JavaScript sample code provided in this guide.

Once you generate your license key, it will automatically be included in your sample code below.

License Key

1// ES6 Compliant Syntax
2// GitHub Copilot v1, Claude Sonnet 4 (Preview), October 8, 2025
3// File: showcase-demos/webviewer-dark-mode/index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
8
9// Global variables to track state
10let redactionDemoFile = "https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf";
11
12// Function to initialize and load the Redaction Tool
13function initializeWebViewer() {
14
15  const element = document.getElementById('viewer');
16  if (!element) {
17    console.error('Viewer div not found.');
18    return;
19  }
20
21  WebViewer({
22    path: '/lib',
23    initialDoc: redactionDemoFile,
24    licenseKey: licenseKey,
25  }, element).then(instance => {
26
27    // define documentViewer for use in other functions
28    const { documentViewer } = instance.Core;
29    documentViewer.addEventListener('documentLoaded', () => {
30      // Initialize redaction tools or any other setup
31    });
32
33    //Default mode on load
34    handleThemeToggle('dark');
35
36    // UI Section 
37    createUIElements();
38  });
39}
40
41// Function to handle theme toggling
42// Toggle WebViewer UI: Dark or Light modes
43function handleThemeToggle(theme) {
44  console.log(`Theme toggle called with: ${theme}`);
45
46  if (theme === 'dark') {
47    window.WebViewer.getInstance().UI.setTheme('dark');
48    console.log('Switching to dark theme');
49  }
50  else if (theme === 'light') {
51    window.WebViewer.getInstance().UI.setTheme('light');
52    console.log('Switching to light theme');
53  }
54}
55
56// Make handleThemeToggle globally available
57window.handleThemeToggle = handleThemeToggle;
58
59// UI Elements
60// ui-elements.js
61// Function to create and initialize UI elements
62function createUIElements() {
63  // Create a container for all controls (label, dropdown, and buttons)
64  // Dynamically load ui-elements.js if not already loaded
65  if (!window.SidePanel) {
66    const script = document.createElement('script');
67    script.src = '/showcase-demos/webviewer-dark-mode/ui-elements.js';
68    script.onload = () => {
69      UIElements.init('viewer');
70
71    };
72    document.head.appendChild(script);
73  }
74}
75
76// Initialize the WebViewer
77initializeWebViewer();
78

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales