主题与样式
WebViewer 内置浅色与深色主题，并支持注入任意 CSS。本指南介绍 setTheme 与 setCustomStyle。
UI API
UI.setTheme(value)
设置 UI 主题。
javascript
UI.setTheme('dark'); // 'light' | 'dark'内部调用 useViewer.setTheme(value)，在 #outerContainer 元素上切换深色主题类。主题也可在加载时通过 ComPDFKitViewer.init 的 theme 选项设置（变为 &theme= 哈希参数，由 App/index.vue 读取）。
UI.setThemeMode(value)是setTheme的弃用别名，会发出弃用警告。
UI.setCustomStyle(style)
将原始 CSS 字符串注入文档 <head>。
javascript
UI.setCustomStyle(`
.Header { background: #1e1e2e !important; }
.Button:hover { opacity: 0.8; }
`);这是唯一不接收 store 的 UI API——它直接操作 DOM，创建 <style> 元素并追加到 document.head。用于主题系统未暴露的一次性样式覆盖。
内置主题
| 主题 | 说明 |
|---|---|
light | 默认浅色主题。 |
dark | 深色主题；以类名应用于 #outerContainer。 |
主题状态位于 viewer store（theme: 'light' | 'dark'），与相关显示标志（fullScreen）并列。
加载时主题与 CSS
可在 UI 渲染前通过 init 选项/URL 哈希参数设置主题并注入样式表（由 App/index.vue 消费）：
javascript
ComPDFKitViewer.init({
path: '/lib',
pdfUrl: '/files/sample.pdf',
theme: 'dark', // → &theme=dark 哈希参数
css: '/styles/my-overrides.css', // → 注入 <link rel="stylesheet">
}, document.getElementById('viewer'));css 选项注入 <link> 样式表；theme 设置初始主题类。showToolbarControl 通过 &header=true|false 切换头部。
示例
按钮切换主题
javascript
const { UI } = instance;
let dark = false;
document.getElementById('themeToggle').addEventListener('click', () => {
dark = !dark;
UI.setTheme(dark ? 'dark' : 'light');
});通过自定义 CSS 覆盖面板宽度
javascript
UI.setCustomStyle(`
.modular-panel { width: 320px !important; }
.modular-panel.mobile { width: 100vw !important; }
`);