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 des feuilles de style spécifiques comme searchBar.css et annotationBar.css). La thématisation se fait à trois niveaux — choisissez le niveau le plus superficiel qui vous convient.

Niveau 1 — Configurer l'interface

Beaucoup de « thématisation » est en réalité de la configuration :

• ViewerConfig.ShowThumbs = false — aucun 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 l'interface utilisée par votre hôte.

Niveau 2 — Surcharger le CSS

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

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

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

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

La page hôte contrôle entièrement la mise en page externe — le widget s'affiche à l'intérieur de la boîte que vous fournissez à #divDocViewer / #div_ctlDoc (la paire de conteneurs standard du Démarrage rapide).

Deux règles pratiques :

• Ne chargez pas Bootstrap deux fois. 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 optionnel ; moins de bundles, moins de styles à gérer.

Niveau 3 — Créez votre propre barre d'outils

Pour une expérience entièrement personnalisée, pilotez le widget depuis votre propre interface — c'est exactement ainsi que l'exemple de référence construit la barre d'outils principale du visualiseur. 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 lors de 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>
    <!-- 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>

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 conjointement avec votre barre d'outils personnalisée du visualiseur ou les ignorer et appeler vous‑même les API du widget sous‑jacent. Consultez le package complet du visualiseur dans le Démarrage rapide pour l'ordre complet d'intégration.

Mode sombre et RTL

Le widget ne fournit pas de thème sombre ; une surcharge 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 parfaitement dans une mise en page RTL — assurez‑vous que votre propre barre d'outils soit consciente du RTL.

Ce qu'il ne faut pas faire

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