Dark Mode | FastComments Docs

自動検出

デフォルトでは、FastCommentsはカラーサークルの「黒からの距離」に基づいて、サイトの背景が暗いかどうかを自動的に検出します。

当社の製品はこれを最大限に行いますが、カラーホイールにはほぼ無限の色があり、アプリケーションが適切でない場合にダークモードを選択したり、その逆が起こるシナリオがある可能性があります。このドキュメントでは、これをより細かく制御する方法について説明します。

技術的な詳細

ウィジェットが最初にロードされるとき、コメントウィジェットから上方向にページ内の要素をトラバースして、暗い背景を探すことでダークモードを検出します。

このステップの後にダークモードを切り替えるには、ウィジェットを呼び出して設定を更新する必要があります。これは手動設定セクションで説明されています。

手動設定

開発者向け - ダークモードを強制的にオフにする

ダークモードを強制的にオフにするには、ウィジェット設定でhasDarkBackgroundをfalseとして渡します。これはVanillaJS、Angular、React、Vue、React Nativeライブラリで動作します。

各ライブラリにはGitHubにexamplesフォルダがあり、ダークモードの使用方法の例が含まれています。

ダークモードを強制的にオンにする

hasDarkBackgroundをtrueに設定することで、ダークモードを常にオンにすることができます。

これはこちらのウィジェットカスタマイズUIからも行えます。

Base Themeの下でForce Dark Modeを選択するだけです。

VanillaJSウィジェット - ダークモードの更新

ダークモードを更新する最も簡単な方法は、ページ上のウィジェットのすべてのインスタンスを通過し、その設定を更新することです：

VanillaJS - Dark Mode Toggle

Copy

    let isDarkMode = somehowDetermineIfDarkModeEnabled();
    for (const instanceWrapped of window.fcUIInstances) {
        if (instanceWrapped.targetElement) {
            const config = instanceWrapped.config;
            config.hasDarkBackground = isDarkMode;
            instanceWrapped.instance.update(config)
        }
    }

WordPress Networker テーマのダークモード対応

WordPress Networkerテーマの場合、ダークモードを自動検出してコメントウィジェットを更新するために、WordPressインストールにカスタムコードを追加する必要があります。

コードはサイトのフッターに挿入する必要があります。これを行うことができるプラグインはたくさんありますので、ここではリストしません。ただし、追加するコードは次のとおりです：

Networker Theme Dark Mode Support Script