Thèmes personnalisés

Le visualiseur est fourni avec un aspect neutre basé sur Bootstrap, servi à partir des ressources intégrées (viewer.css, ainsi que les feuilles de style spécifiques aux fonctionnalités comme searchBar.css et annotationBar.css). Le thémage s’opère à trois niveaux — choisissez le niveau le plus superficiel qui répond à vos besoins.

Niveau 1 — Configurer le chrome

Beaucoup de « thémage » n’est en fait que de la configuration :

• ViewerConfig.ShowThumbs = false — pas de panneau de vignettes.
• ViewerConfig.FitType = "height" | "width" — comment les pages remplissent la fenêtre d’affichage.
• ViewerConfig.ShowThumbs = false combiné avec des bundles sélectifs CssConfig/ScriptConfig — ne conservez que le chrome utilisé par votre hôte.

Niveau 2 — Remplacer le CSS

Viewer.ReferenceCss() génère des balises <link> simples ; tout ce que vous chargez après ces balises l’emporte dans la cascade. Dimensionnez et encadrez le visualiseur depuis votre propre feuille de style :

/* Votre feuille de style, chargée après ReferenceCss() */

/* Les deux conteneurs que vous possédez */
#divDocViewer { width: 100%; height: calc(100vh - 48px); }

/* Cartes de pages du widget */
.docPage { max-width: none; }

La page hôte contrôle entièrement la mise en page extérieure — le widget s’affiche à l’intérieur de la boîte que vous donnez à #divDocViewer / #div_ctlDoc (la paire de conteneurs standard du Quick Start).

Deux règles pratiques :

• Ne doublez pas le chargement de Bootstrap. Si votre application inclut déjà Bootstrap, ignorez IncludeBootstrapCss/IncludeBootstrap et laissez le widget hériter du vôtre — cela suffit à rendre le visualiseur natif à votre application.
• Incluez uniquement les bundles que vous utilisez. Chaque drapeau CssConfig/ScriptConfig est opt‑in ; moins de bundles, moins de styles à gérer.

Niveau 3 — Construire votre propre barre d’outils

Pour une expérience entièrement brandée, pilotez le widget depuis votre propre UI — c’est exactement la façon dont l’exemple de référence construit la barre d’outils principale du Viewer. Cette barre d’outils est du balisage hôte plus un assistant spécifique à l’application ; ce n’est pas un ruban SDK intégré. L’instance docViewer renvoyée par l’initialisation constitue votre surface d’API, ainsi que vos propres points de terminaison :

<div id="toolbar">
    <button id="btnOpen">Open</button>
    <button id="btnPrev">‹</button>
    <button id="btnNext">›</button>
    <!-- votre système de design, vos icônes -->
</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: () => { /* activez vos boutons */ },
        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>

La recherche et l’annotation sont différentes : leurs composants ruban optionnels sont intégrés dans le SDK (IncludeSearchBar, IncludeAnnotationBar) et génèrent leur propre DOM. Vous pouvez les utiliser avec votre barre d’outils Viewer personnalisée ou les ignorer et appeler vous‑même les API sous‑jacentes du widget. Voir le package complet du Viewer dans le Quick Start pour l’ordre d’intégration complet.

Mode sombre et RTL

Le widget ne fournit pas de thème sombre ; un remplacement de Niveau 2 ciblant votre classe de mode sombre (par ex. .dark #divDocViewer { … }) sur les arrière‑plans et les bordures couvre la plupart des besoins, puisque le contenu de la page est rendu sous forme d’images. Pour les hôtes RTL, le visualiseur fonctionne correctement à l’intérieur d’une mise en page RTL — assurez‑vous que votre propre barre d’outils gère le sens RTL.

Ce qu’il ne faut pas faire

Ne dupliquez pas ou ne modifiez pas les feuilles de style intégrées : elles sont livrées avec le package et sont remplacées à chaque mise à jour. Les remplacements dans votre propre feuille de style survivent aux mises à jour ; les modifications de viewer.css ne le font pas.