皆さん、こんにちは。
過去数時間、GhostブログのダークモードをDiscourseの埋め込みと同期させようと試みてきました。ホストサイトでダークモードの状態を検出し、正しいパラメーターを渡すことには成功しましたが、Discourseは匿名ユーザーに対してそれらを無視しているようです。
私たちのセットアップと確認済みの事項:
パラメーターの挿入:Ghostでカスタムスクリプトを使用して、data-color-scheme="dark"属性を検出しています。ブラウザコンソールとネットワークタブで、パラメーター?color_scheme_id=13(私たちのパレット13)または?theme_id=4(専用のダークテーマ)がembed.jsリクエストに、そしてその後のIframeのsrcに正しく追加されていることを確認しました。
テーマの設定:Discourseでは、対象のテーマ(ID 4)とカラースキーム(ID 13)の両方が「ユーザー選択可能」としてマークされています。カラースキームは、アクティブなテーマの「デフォルトダーク」としても設定されています。
問題:IframeのURLには.../embed/comments?topic_id=...&theme_id=4とはっきりと表示されているにもかかわらず、匿名訪問者に対してレンダリングされたコンテンツはライトモード(デフォルト)のままです。
実行したテスト:
- スクリプトに
theme_idを直接ハードコーディングする。 embed.jsの読み込み完了後にJavaScriptでIframeのsrcをマニュアルで変更する。- スタイルを強制するためにTheme Component内で
@media(prefers-color-scheme: dark) を試みるが、これも埋め込みコンテキストでは無視されるか上書きされるようです。
私の質問:Discourseの埋め込みロジックに、匿名ユーザーがURLパラメーター経由でテーマやカラースキームを切り替えることを妨げる特定のセキュリティ設定やハードコードされた制限はありますか?
私たちは「未スタイリングコンテンツのちらつき(Flash of unstyled content)」を避け、ダークなブログ記事を読んでいる読者が白いコメントセクションで目をくらまされないようにしたいと考えています。埋め込みコンテンツのこの動作を制御するapp.yml設定や隠されたサイト設定はありますか?
Discourseのバージョン:Discourse 3.5.3
何か洞察があれば、前もって感謝いたします!