カスタムテーマ – Doconut ドキュメント

ビューアは、埋め込みリソース（viewer.css と、searchBar.css や annotationBar.css のような機能別スタイルシート）から提供される、ニュートラルで Bootstrap ベースの外観で提供されます。テーマ設定は 3 つのレベルで行われます — 最も浅いレベルを選択してください。

レベル 1 — クロームの構成

多くの「テーマ設定」は実際には構成です:

ViewerConfig.ShowThumbs = false — サムネイルパネルなし。
ViewerConfig.FitType = "height" | "width" — ページがビューポートにどのようにフィットするか。
ViewerConfig.ShowThumbs = false と選択的な CssConfig/ScriptConfig バンドルを組み合わせる — ホストが使用するクロームだけを保持します。

レベル 2 — CSS のオーバーライド

Viewer.ReferenceCss() はプレーンな <link> タグを出力します。それらの後 に読み込むものがカスケードで優先されます。独自のスタイルシートからビューアのサイズとフレームを設定します:

css

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

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

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

ホストページは外部レイアウトを完全に制御します — ウィジェットは #divDocViewer / #div_ctlDoc（Quick Start の標準コンテナペア）に与えた任意のボックス内に描画されます。

実用的なルールは 2 つです:

Bootstrap を二重に読み込まないでください。 アプリがすでに Bootstrap を提供している場合は、IncludeBootstrapCss/IncludeBootstrap をスキップし、ウィジェットに自分のものを継承させてください — これだけでビューアはアプリにネイティブな外観になります。
使用するバンドルだけを含めてください。 すべての CssConfig/ScriptConfig フラグはオプトインです。バンドルが少なければ少ないほど、対処すべきスタイルも減ります。

レベル 3 — 独自のツールバーを構築

完全にブランド化された体験を実現するには、独自の UI からウィジェットを操作します — これがリファレンスサンプルがメインの Viewer ツールバーを構築する正確な方法です。そのツールバーはホストのマークアップとアプリ固有のヘルパーで構成されており、埋め込み SDK リボンではありません。初期化時に返される docViewer インスタンスが API の入口となり、独自のエンドポイントと共に使用します:

html

<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 と Annotation は異なります: それらのオプションのリボンコンポーネントは SDK に埋め込まれており（IncludeSearchBar、IncludeAnnotationBar）、独自の DOM を生成します。独自の Viewer ツールバーと併用することも、スキップして基礎ウィジェット API を直接呼び出すこともできます。統合手順の全体像は、Quick Start の完全な Viewer パッケージをご参照ください。

ダークモードと右から左へのレイアウト

ウィジェットにはダークテーマが同梱されていません。レベル 2 のオーバーライドでダークモード用クラス（例: .dark #divDocViewer { … }）を背景やボーダーに適用すれば、ほとんどの要件をカバーできます。ページコンテンツ自体は画像として描画されるためです。右から左へのレイアウトを使用するホストの場合、ビューアは RTL レイアウト内で問題なく動作します — 独自のツールバーも RTL に対応させてください。

やってはいけないこと

埋め込みのスタイルシートをフォークしたり編集したりしないでください: それらはパッケージ内に同梱されており、更新のたびに置き換えられます。独自のスタイルシートでのオーバーライドはアップグレード後も残りますが、viewer.css の直接編集は残りません。