自定义主题

查看器默认采用中性、基于 Bootstrap 的外观，资源内置于嵌入式文件（viewer.css，以及按功能划分的样式表如 searchBar.css 和 annotationBar.css）。主题化分为三个层级——选择最浅的层级即可满足需求。

Level 1 — Configure the chrome

大量的“主题化”其实是配置：

• ViewerConfig.ShowThumbs = false — 不显示缩略图面板。
• ViewerConfig.FitType = "height" | "width" — 页面如何填充视口。
• 将 ViewerConfig.ShowThumbs = false 与选择性的 CssConfig/ScriptConfig 捆绑一起使用 — 只保留宿主使用的框架部分。

Level 2 — Override the CSS

Viewer.ReferenceCss() 会输出普通的 <link> 标签；在它们之后加载的任何内容都会在层叠中占优。使用自己的样式表来设定查看器的尺寸和框架：

/* Your stylesheet, loaded after ReferenceCss() */

/* The two containers you own */
#divDocViewer { width: 100%; height: calc(100vh - 48px); }

/* Widget page cards */
.docPage { max-width: none; }

宿主页面完全控制外部布局——组件会在你提供的 #divDocViewer / #div_ctlDoc（快速入门中的标准容器对）内部渲染。

两个实用规则：

• 不要重复加载 Bootstrap。 如果你的应用已经包含 Bootstrap，请跳过 IncludeBootstrapCss/IncludeBootstrap，让组件继承你已有的样式——这足以让查看器看起来原生于你的应用。
• 仅包含你使用的捆绑。 每个 CssConfig/ScriptConfig 标记都是按需开启的；捆绑越少，需要对抗的样式就越少。

Level 3 — Build your own toolbar

若想实现完整的品牌化体验，可从自己的 UI 驱动组件——这正是参考示例构建其主 Viewer 工具栏的方式。该工具栏由宿主标记加上特定于应用的辅助代码组成；它不是嵌入式 SDK Ribbon。初始化返回的 docViewer 实例即为你的 API 接口，同时配合你自己的端点使用：

<div id="toolbar">
    <button id="btnOpen">Open</button>
    <button id="btnPrev">‹</button>
    <button id="btnNext">›</button>
    <!-- your design system, your icons -->
</div>
<div id="divDocViewer"><div id="div_ctlDoc"></div></div>

<script>
    const objViewer = $('#div_ctlDoc').docViewer({
        showThumbs: true,
        autoLoad:   false,
        BasePath:   '/',
        ResPath:    'doconut-res/images',
        onViewerReady: () => { /* enable your buttons */ },
        onError: (msg) => console.error('DocViewer:', msg)
    });

    document.getElementById('btnOpen').addEventListener('click', async () => {
        const resp  = await fetch('/api/open?fileName=Sample.pdf', { method: 'POST' });
        const token = await resp.text();
        objViewer.View(token);
    });
</script>

搜索和批注是不同的：它们的可选 Ribbon 组件嵌入在 SDK 中（IncludeSearchBar、IncludeAnnotationBar），并会生成自己的 DOM。你可以将它们与自定义 Viewer 工具栏一起使用，也可以不使用并自行调用底层组件 API。请参阅快速入门中的完整 Viewer 包了解完整的集成顺序。

Dark mode and RTL

组件本身不提供暗色主题；在暗色模式下，只需在第 2 级覆盖中针对你的暗色类（例如 .dark #divDocViewer { … }）调整背景和边框，即可满足大多数需求，因为页面内容本身是以图像形式渲染的。对于 RTL 宿主，查看器可以在 RTL 布局中正常工作——只需让你的自定义工具栏支持 RTL 即可。

What not to do

不要分叉或编辑嵌入的样式表：它们随包一起发布，并在每次更新时被替换。将覆盖写入你自己的样式表可以在升级后仍然生效，而对 viewer.css 的直接修改则不会保留。