Anpassade teman

Visaren levereras med ett neutralt, Bootstrap‑baserat utseende som serveras från de inbäddade resurserna (viewer.css, samt per‑funktions‑stilmallar som searchBar.css och annotationBar.css). Tematisering sker på tre nivåer — välj den grundläggande som räcker för ditt behov.

Nivå 1 — Konfigurera ramen

Mycket av ”tematiseringen” är egentligen konfiguration:

• ViewerConfig.ShowThumbs = false — ingen miniatyrpanel.
• ViewerConfig.FitType = "height" | "width" — hur sidor fyller visningsområdet.
• ViewerConfig.ShowThumbs = false together with selective CssConfig/ScriptConfig bundles — behåll endast den ram som din värd använder.

Nivå 2 — Överskriv CSS

Viewer.ReferenceCss() genererar enkla <link>‑taggar; allt du laddar efter dem vinner i kaskaden. Storlek och ram för visaren från din egen stilmall:

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

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

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

Värdsidan styr den yttre layouten helt — widgeten renderas inuti den ruta du ger #divDocViewer / #div_ctlDoc (det standardbehållarparet från Snabbstart).

Två praktiska regler:

• Ladda inte Bootstrap två gånger. Om din app redan levererar Bootstrap, hoppa över IncludeBootstrapCss/IncludeBootstrap och låt widgeten ärva din — detta ensamt får visaren att se inhemsk ut i din app.
• Inkludera endast de paket du använder. Varje CssConfig/ScriptConfig‑flagga är valfri; färre paket, färre stilar att hantera.

Nivå 3 — Bygg ditt eget verktygsfält

För en helt varumärkesanpassad upplevelse, styr widgeten från ditt eget UI — så bygger referensexemplet exakt sitt huvudverktygsfält för Viewer. Det verktygsfältet är värd‑markup plus en app‑specifik hjälpare; det är inte ett inbäddat SDK‑band. docViewer‑instansen som returneras vid initiering är ditt API‑gränssnitt, tillsammans med dina egna slutpunkter:

<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>

Sök och Anteckning är annorlunda: deras valfria Ribbon‑komponenter är inbäddade i SDK (IncludeSearchBar, IncludeAnnotationBar) och genererar sin egen DOM. Du kan använda dem tillsammans med ditt anpassade Viewer‑verktygsfält eller hoppa över dem och anropa widgetens underliggande API:er själv. Se den fullständiga Viewer‑paketet i Snabbstart för den kompletta integrationsordningen.

Mörkt läge och RTL

Widgeten levereras inte med ett mörkt tema; en Nivå‑2‑överskrivning som riktar sig mot din mörkt‑läge‑klass (t.ex. .dark #divDocViewer { … }) för bakgrunder och kanter täcker de flesta behov, eftersom sidans innehåll själv renderas som bild. För RTL‑värdar fungerar visaren bra i en RTL‑layout — håll ditt eget verktygsfält RTL‑medvetet.

Vad du inte bör göra

Forka eller redigera inte de inbäddade stilmallarna: de levereras i paketet och ersätts vid varje uppdatering. Överskrivningar i din egen stilmall överlever uppgraderingar; ändringar i viewer.css gör det inte.