Temas Personalizados

El visor se entrega con un aspecto neutro basado en Bootstrap, servido desde los recursos incrustados (viewer.css, además de hojas de estilo por característica como searchBar.css y annotationBar.css). La tematización ocurre en tres niveles — elige el más superficial que te sirva.

Nivel 1 — Configura la interfaz

Mucho de lo que se llama "tematización" es realmente configuración:

• ViewerConfig.ShowThumbs = false — sin panel de miniaturas.
• ViewerConfig.FitType = "height" | "width" — cómo se ajustan las páginas al viewport.
• ViewerConfig.ShowThumbs = false junto con paquetes selectivos CssConfig/ScriptConfig — conserva solo la interfaz que usa tu host.

Nivel 2 — Anular el CSS

Viewer.ReferenceCss() genera etiquetas <link> simples; cualquier cosa que cargues después de ellas gana la cascada. Dimensiona y enmarca el visor desde tu propia hoja de estilo:

/* 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 página host controla por completo el diseño externo — el widget se renderiza dentro del contenedor que le asignes a #divDocViewer / #div_ctlDoc (el par de contenedores estándar del Quick Start).

Dos reglas prácticas:

• No cargues Bootstrap dos veces. Si tu aplicación ya incluye Bootstrap, omite IncludeBootstrapCss/IncludeBootstrap y permite que el widget herede el tuyo — esto por sí solo hace que el visor parezca nativo de tu aplicación.
• Incluye solo los paquetes que uses. Cada bandera CssConfig/ScriptConfig es opt‑in; menos paquetes, menos estilos que combatir.

Nivel 3 — Construye tu propia barra de herramientas

Para una experiencia totalmente personalizada, controla el widget desde tu propia UI — así es exactamente como el ejemplo de referencia construye la barra de herramientas principal del Visor. Esa barra es marcado del host más un asistente específico de la aplicación; no es una Ribbon del SDK incrustada. La instancia docViewer devuelta por la inicialización es tu superficie API, junto con tus propios puntos finales:

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

Search y Annotation son diferentes: sus componentes Ribbon opcionales están incrustados en el SDK (IncludeSearchBar, IncludeAnnotationBar) y generan su propio DOM. Puedes usarlos junto con tu barra de herramientas personalizada del Visor o omitirlos y llamar tú mismo a las APIs subyacentes del widget. Consulta el paquete completo del Visor en Guía Rápida para el orden completo de integración.

Modo oscuro y RTL

El widget no incluye un tema oscuro; una anulación de Nivel 2 que apunte a tu clase de modo oscuro (p. ej., .dark #divDocViewer { … }) sobre fondos y bordes cubre la mayoría de las necesidades, ya que el contenido de la página se renderiza como imágenes. Para hosts RTL, el visor funciona sin problemas dentro de un diseño RTL — mantén tu propia barra de herramientas consciente de RTL.

Qué no hacer

No bifurques ni edites las hojas de estilo incrustadas: se entregan dentro del paquete y se reemplazan en cada actualización. Las anulaciones en tu propia hoja de estilo sobreviven a las actualizaciones; las ediciones a viewer.css no.