Temas Personalizados

El visor se entrega con un aspecto neutro basado en Bootstrap, servido desde los recursos incrustados (viewer.css, más 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 lleve allí.

Nivel 1 — Configura la interfaz

Mucho de la "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 área visible.
• ViewerConfig.ShowThumbs = false junto con paquetes selectivos de CssConfig/ScriptConfig — conserva solo la interfaz que usa tu host.

Nivel 2 — Sobrescribir el CSS

Viewer.ReferenceCss() genera etiquetas <link> simples; cualquier cosa que cargues después de ellas gana la cascada. Ajusta el tamaño y el marco del 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 completamente el diseño externo — el widget se renderiza dentro del contenedor que 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 utilizas. Cada bandera de CssConfig/ScriptConfig es opcional; 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 la muestra de referencia construye su 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 Cinta 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>

Búsqueda y Anotación son diferentes: sus componentes opcionales de Cinta 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 Quick Start para el orden completo de integración.

Modo oscuro y RTL

El widget no incluye un tema oscuro; una sobrescritura de Nivel 2 que apunte a tu clase de modo oscuro (p. ej., .dark #divDocViewer { … }) en 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 sobrescrituras en tu propia hoja de estilo sobreviven a las actualizaciones; las ediciones a viewer.css no.