postMessage を使用して実装しました。コードとその実行ロジックは以下のとおりです。
コードブロック①は、埋め込まれたDiscourse iframe内でイベントリスナーを追加します。これにより、埋め込まれたDiscourseがロードされると、Discourse iframeを埋め込んでいる私のウェブサイトにメッセージが投稿されます。
私のウェブサイトが埋め込まれたDiscourseからのメッセージを受信すると、コードブロック②に示すように検証を行い、合格した場合は setIframeStyle 関数を呼び出して埋め込まれたDiscourseのスタイルを設定します。
コードブロック③に示す setIframeStyle 関数は、postMessage を呼び出すことによって、カラーモード（「dark」または「light」）をiframeに渡します。さらに、ダークモードが切り替わった後、この関数を呼び出すことで、埋め込まれたDiscourseを私のウェブサイトと同じカラーモードに保つことができます。
コードブロック④は、埋め込まれたDiscourseが私のウェブサイトから送信されたカラーモードメッセージを処理できるようにします。ここでは、bodyタグのクラス名を切り替えることでカラーモードを切り替えます。
さらに、コードブロック①と④は、以下のようにDiscourse管理ページに追加されます。
カスタムCSSクラスは以下のように追加する必要があります。
