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: Choose your preferred web stack
Step 2: Download required modules listed in the Demo Dependencies section below
Step 3: Add the ES6 JavaScript sample code provided in this guide

Demo Dependencies
This sample uses the following:

Want to see a live version of this demo?

Try the WebViewer Dark Mode demo

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales