ComPDF
Contact Sales
DemoSampleAPI ReferenceFAQ
、
New Release

Open-Source PDF SDK & AI Document Processing

Get the full self-hosted SDK and AI document processing on GitHub. One-click deploy to quickly build your document workflows.

Self-hosted SDKComPDF AI

Themes & Styles ​

The WebViewer ships with light and dark themes and supports injecting arbitrary CSS. This guide covers setTheme and setCustomStyle.

UI APIs ​

UI.setTheme(value) ​

Set the UI theme.

javascript
UI.setTheme('dark');   // 'light' | 'dark'

Internally calls useViewer.setTheme(value), which toggles the dark-theme class on the #outerContainer element. The theme can also be set at load time via the theme option of ComPDFKitViewer.init (which becomes a &theme= hash param read by App/index.vue).

UI.setThemeMode(value) is a deprecated alias for setTheme and emits a deprecation warning.

UI.setCustomStyle(style) ​

Inject a raw CSS string into the document <head>.

javascript
UI.setCustomStyle(`
  .Header { background: #1e1e2e !important; }
  .Button:hover { opacity: 0.8; }
`);

This is the only UI API that does not receive a store — it manipulates the DOM directly by creating a <style> element and appending it to document.head. Use it for one-off style overrides that the theme system does not expose.

Built-in themes ​

ThemeDescription
lightDefault light theme.
darkDark theme; applied as a class on #outerContainer.

The theme state lives in the viewer store (theme: 'light' | 'dark') alongside related display flags (fullScreen).

Loading-time theme & CSS ​

You can set the theme and inject a stylesheet before the UI renders, via init options / URL hash params consumed by App/index.vue:

javascript
ComPDFKitViewer.init({
  path: '/lib',
  pdfUrl: '/files/sample.pdf',
  theme: 'dark',                       // → &theme=dark hash param
  css: '/styles/my-overrides.css',     // → injects a <link rel="stylesheet">
}, document.getElementById('viewer'));

The css option injects a <link> stylesheet; theme sets the initial theme class. showToolbarControl toggles the header via &header=true|false.

Examples ​

Toggle theme on a button ​

javascript
const { UI } = instance;
let dark = false;
document.getElementById('themeToggle').addEventListener('click', () => {
  dark = !dark;
  UI.setTheme(dark ? 'dark' : 'light');
});

Override panel width via custom CSS ​

javascript
UI.setCustomStyle(`
  .modular-panel { width: 320px !important; }
  .modular-panel.mobile { width: 100vw !important; }
`);