WebViewer Dark Mode Showcase Demo Code Sample

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Web SDKLive demo

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.

index.js

// ES6 Compliant Syntax
// GitHub Copilot v1, Claude Sonnet 4 (Preview), October 8, 2025
// File: showcase-demos/webviewer-dark-mode/index.js

import WebViewer from '@pdftron/webviewer';

const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';

// Global variables to track state
let redactionDemoFile = "https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf";

// Function to initialize and load the Redaction Tool
function initializeWebViewer() {

  const element = document.getElementById('viewer');
  if (!element) {
    console.error('Viewer div not found.');
    return;
  }

  WebViewer({
    path: '/lib',
    initialDoc: redactionDemoFile,
    licenseKey: licenseKey,
  }, element).then(instance => {

    // define documentViewer for use in other functions
    const { documentViewer } = instance.Core;
    documentViewer.addEventListener('documentLoaded', () => {
      // Initialize redaction tools or any other setup
    });

    //Default mode on load
    handleThemeToggle('dark');

    // UI Section 
    createUIElements();
  });
}

// Function to handle theme toggling
// Toggle WebViewer UI: Dark or Light modes
function handleThemeToggle(theme) {
  console.log(`Theme toggle called with: ${theme}`);

  if (theme === 'dark') {
    window.WebViewer.getInstance().UI.setTheme('dark');
    console.log('Switching to dark theme');
  }
  else if (theme === 'light') {
    window.WebViewer.getInstance().UI.setTheme('light');
    console.log('Switching to light theme');
  }
}

// Make handleThemeToggle globally available
window.handleThemeToggle = handleThemeToggle;

// UI Elements
// ui-elements.js
// Function to create and initialize UI elements
function createUIElements() {
  // Create a container for all controls (label, dropdown, and buttons)
  // Dynamically load ui-elements.js if not already loaded
  if (!window.SidePanel) {
    const script = document.createElement('script');
    script.src = '/showcase-demos/webviewer-dark-mode/ui-elements.js';
    script.onload = () => {
      UIElements.init('viewer');

    };
    document.head.appendChild(script);
  }
}

// Initialize the WebViewer
initializeWebViewer();

ui-elements.js

ui-elements.js

// ES6 Compliant Syntax
// GitHub Copilot v1, Claude Sonnet 4 (Preview), October 8, 2025
// File: showcase-demos/webviewer-dark-mode/ui-elements.js

class UIElements {


  static init(viewerId) {
    this.createSidePanel(viewerId);
  }

  // Function to create a side panel that sits on the left side of the viewer
  static createSidePanel(viewerId) {
    const viewerElement = document.getElementById(viewerId);
    if (!viewerElement) {
      console.error(`Viewer element with id '${viewerId}' not found.`);
      return;
    }

    // Create the side panel container
    const sidePanel = document.createElement('div');
    sidePanel.id = 'side-panel';
    sidePanel.className = 'side-panel';

    // Create side panel content
    const content = document.createElement('div');
    content.className = 'side-panel-content';

    // Add some sample content
    const sampleContent = document.createElement('div');
    sampleContent.innerHTML = `
      <div class="panel-section">
        <h4>Switch Modes</h4>
        <div class="theme-switch-container">
          <div class="theme-switch">
            <input type="radio" id="dark-mode" name="theme" value="dark" checked onclick="handleThemeToggle(this.value)">
            <label for="dark-mode" class="switch-option left">
              <span class="switch-icon">🌙</span>
              <span class="switch-label">Dark</span>
            </label>

            <input type="radio" id="light-mode" name="theme" value="light" onclick="handleThemeToggle(this.value)">
            <label for="light-mode" class="switch-option right">
              <span class="switch-icon">☀️</span>
              <span class="switch-label">Light</span>
            </label>
            
            <div class="switch-slider"></div>
          </div>
        </div>
      </div>
    `;

    content.appendChild(sampleContent);

    sidePanel.appendChild(content);

    // Create a wrapper to contain both the side panel and viewer
    const wrapper = document.createElement('div');
    wrapper.id = 'viewer-wrapper';
    wrapper.className = 'viewer-wrapper';

    // Insert the wrapper before the viewer element
    viewerElement.parentNode.insertBefore(wrapper, viewerElement);

    // Move the viewer element into the wrapper and add the side panel
    wrapper.appendChild(sidePanel);
    wrapper.appendChild(viewerElement);

    // Add the viewer-with-panel class to the viewer element
    viewerElement.classList.add('viewer-with-panel');

    console.log('Side panel created successfully');
  }

  // Function to toggle side panel visibility
  toggleSidePanel() {
    const sidePanel = document.getElementById('side-panel');
    if (sidePanel) {
      sidePanel.classList.toggle('collapsed');
    }
  }

  // Function to add content to the side panel
  addPanelContent(content) {
    const panelContent = document.querySelector('.side-panel-content');
    if (panelContent) {
      const contentDiv = document.createElement('div');
      contentDiv.className = 'panel-section';
      contentDiv.innerHTML = content;
      panelContent.appendChild(contentDiv);
    }
  }
}

index.css

index.css

/* Main layout - side by side containers within #viewer */
#viewer {
  display: flex;
  height: 100%;
  width: 100%;
}

/* Side Panel Styles */
.viewer-wrapper {
  display: flex;
  height: 100vh;
  width: 100%;
}

.side-panel {
  width: 300px;
  min-width: 250px;
  max-width: 400px;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.side-panel.collapsed {
  transform: translateX(-100%);
}

.side-panel-header {
  background-color: #e9ecef;
  padding: 15px 20px;
  border-bottom: 1px solid #ddd;
  flex-shrink: 0;
}

.side-panel-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.side-panel-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.panel-section {
  margin-bottom: 25px;
}

.panel-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.panel-button {
  display: block;
  width: 100%;
  padding: 10px 15px;
  margin-bottom: 8px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.panel-button:hover {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.panel-button:active {
  transform: translateY(1px);
}

.setting-item {
  margin-bottom: 15px;
}

.setting-item label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #555;
  cursor: pointer;
}

.setting-item input[type="checkbox"] {
  margin-right: 10px;
}

.setting-item input[type="range"] {
  margin-left: 10px;
  flex: 1;
}

.viewer-with-panel {
  flex: 1;
  height: 100vh;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .side-panel {
    background-color: #2d3748;
    border-right-color: #4a5568;
  }
  
  .side-panel-header {
    background-color: #1a202c;
    border-bottom-color: #4a5568;
  }
  
  .side-panel-header h3 {
    color: #e2e8f0;
  }
  
  .panel-section h4 {
    color: #a0aec0;
  }
  
  .panel-button {
    background-color: #4a5568;
    border-color: #718096;
    color: #e2e8f0;
  }
  
  .panel-button:hover {
    background-color: #007bff;
    border-color: #007bff;
  }
  
  .setting-item label {
    color: #a0aec0;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .side-panel {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1001;
  }
  
  .viewer-wrapper {
    position: relative;
  }
  
  .side-panel.collapsed {
    transform: translateX(-100%);
  }
}

/* Toggle button for mobile */
.side-panel-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1002;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  display: none;
}

@media (max-width: 768px) {
  .side-panel-toggle {
    display: block;
  }
}

/* Theme Switch Styles */
.theme-switch-container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.theme-switch {
  position: relative;
  display: flex;
  background-color: #e9ecef;
  border-radius: 25px;
  padding: 4px;
  border: 2px solid #dee2e6;
  width: 200px;
  height: 50px;
  overflow: hidden;
}

.theme-switch input[type="radio"] {
  display: none;
}

.switch-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
  padding: 5px;
}

.switch-option.left {
  border-radius: 20px 0 0 20px;
}

.switch-option.right {
  border-radius: 0 20px 20px 0;
}

.switch-icon {
  font-size: 16px;
  margin-bottom: 2px;
}

.switch-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.switch-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  transition: transform 0.3s ease, background 0.3s ease;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Dark mode selected */
#dark-mode:checked ~ .switch-slider {
  transform: translateX(0);
  background: linear-gradient(135deg, #2c3e50 0%, #5a5c5e 100%);
}

/* Light mode selected */
#light-mode:checked ~ .switch-slider {
  transform: translateX(100%);
  background: linear-gradient(135deg, #e4ce85 0%, #e9ca1d 100%);
}

/* Text color changes */
#dark-mode:checked ~ .switch-option.left {
  color: white;
}

#light-mode:checked ~ .switch-option.right {
  color: white;
}

.switch-option {
  color: #6c757d;
}

/* Dark mode theme styles */
@media (prefers-color-scheme: dark) {
  .theme-switch {
    background-color: #4a5568;
    border-color: #718096;
  }
  
  .switch-option {
    color: #a0aec0;
  }
  
  #dark-mode:checked ~ .switch-option.left {
    color: white;
  }
  
  #light-mode:checked ~ .switch-option.right {
    color: white;
  }
}