カスタムテーマ – 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（クイックスタートの標準コンテナペア）に与えた任意のボックス内に描画されます。

実用的なルールは 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 を呼び出すこともできます。統合手順の全体像は、クイックスタートの完全な Viewer パッケージをご参照ください。

ダークモードと RTL

ウィジェット自体にダークテーマは用意されていませんが、レベル 2 のオーバーライドでダークモード用クラス（例: .dark #divDocViewer { … }）を対象に背景やボーダーを調整すれば、ほとんどの要件を満たせます。RTL 環境でもビューアは問題なく動作します — 独自のツールバーだけは RTL に対応させてください。

やってはいけないこと

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