Пользовательские темы

Просмотрщик поставляется с нейтральным внешним видом на основе Bootstrap, который загружается из встроенных ресурсов (viewer.css, а также файлов стилей для отдельных функций, таких как searchBar.css и annotationBar.css). Темизация происходит на трёх уровнях — выберите самый поверхностный, который решит вашу задачу.

Уровень 1 — Настройка оболочки

Большая часть «темизации» — это просто конфигурация:

• ViewerConfig.ShowThumbs = false — без панели миниатюр.
• ViewerConfig.FitType = "height" | "width" — как страницы заполняют область просмотра.
• ViewerConfig.ShowThumbs = false вместе с выборочными пакетами CssConfig/ScriptConfig — оставьте только ту оболочку, которую использует ваш хост.

Уровень 2 — Переопределение 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 (стандартная пара контейнеров из Quick Start).

Два практических правила:

• Не загружайте Bootstrap дважды. Если ваше приложение уже использует Bootstrap, пропустите IncludeBootstrapCss/IncludeBootstrap и позвольте виджету наследовать ваш стиль — это уже делает просмотрщик «родным» для вашего приложения.
• Подключайте только те пакеты, которые действительно нужны. Каждый флаг CssConfig/ScriptConfig включается отдельно; чем меньше пакетов, тем меньше стилей, с которыми нужно бороться.

Уровень 3 — Создание собственной панели инструментов

Для полностью брендированного опыта управляйте виджетом из собственного UI — именно так построена основная панель инструментов в референс‑примере. Эта панель — разметка хоста плюс специфичный для приложения помощник; это не встроенная лента SDK. Экземпляр 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>

Поиск и аннотации отличаются: их необязательные компоненты‑ленты встроены в SDK (IncludeSearchBar, IncludeAnnotationBar) и генерируют собственный DOM. Вы можете использовать их вместе со своей пользовательской панелью Viewer или отказаться от них и вызывать базовые API виджета самостоятельно. См. полный пакет Viewer в Quick Start для полного порядка интеграции.

Тёмный режим и RTL

Виджет не поставляется с тёмной темой; переопределение уровня 2, направленное на ваш класс тёмного режима (например, .dark #divDocViewer { … }) для фонов и границ покрывает большинство потребностей, поскольку содержимое страницы рендерится как изображения. Для хостов RTL просмотрщик без проблем работает внутри RTL‑макета — делайте свою панель инструментов чувствительной к RTL.

Что не следует делать

Не форкайте и не редактируйте встроенные таблицы стилей: они находятся внутри пакета и заменяются при каждом обновлении. Переопределения в вашей собственной таблице стилей сохраняются после обновлений; изменения в viewer.css — нет.