埋め込みコメントにも自動ダークモードですか？

貢献 特徴
19

上記の方法で確認できましたが、スクリーンショットからコードを入力しなければならなかったのは残念です :slight_smile: 以下に、少し更新したものを記載します。

手順

  1. コメントのiframeのレンダリングが完了し、メインのブラウザウィンドウにその旨を伝えるメッセージを送信します。
  2. ブラウザは、ダーク/ライトモードの設定を照会し、その値をiframeに返します。
  3. iframeはメッセージを受信し、ダーク/ライトモードの設定に基づいてdata-attribute、classなどを設定します。

コード

  1. iframeが読み込まれたら、親ウィンドウに通知を送信します。これは、Discourse の 管理者 -> カスタマイズ -> (テーマを選択) -> CSS/HTMLの編集 -> 埋め込みヘッダー に入力する必要があります。
    window.addEventListener("load", (event) => {
        window.parent.postMessage("iframe loaded", "*");
    }, false);
  1. メインウィンドウでこの受信したトリガーを処理します。このコードはブログサイトに配置します。
  const discourse_url = "https://your.discourse-instance.org";

  // ここでテーマを決定し、テーマが何であるかをiframeに知らせるメッセージを送信します
  // notifyFrameStyle を設定する方法については、以下を参照してください
  const notifyIFrameOfTheme = () => {
    const iframe = document.getElementById("discourse-embed-frame");
    if (iframe && iframe.contentWindow) {
      iframe.contentWindow.postMessage(
        {
          // ダークモードの設定をどのように保存しているかに応じて、以下の行をダークモード設定を取得するように変更してください
          theme: document.documentElement.getAttribute("data-theme")
        },
        discourse_url
      );
    }
  };

  // "iframe loaded" メッセージを受信したときに setFrameStyle を呼び出します
  const handleMessageListener = (event) => {
    var origin = event.origin;
    if ((origin === discourse_url) && (event.data == "iframe loaded")) {
      notifyIFrameOfTheme();
    }
  };
  1. (1) の script ブロックで、notifyFrameStyle によって送信されたテーマメッセージのリスナーを追加します。
    window.addEventListener("message", (event) => {
        const payload = event.data;
        if (payload.theme) {
          // テーマ設定で何かを行う。私はiframeの `html` に `data-theme` 属性を設定しましたが、
          // class属性などを設定したい場合もあります
          document.documentElement.setAttribute("data-theme", payload.theme);
        }
    }, false);

スタイリング

管理者 -> カスタマイズ -> (テーマを選択) -> CSS/HTMLの編集 -> 埋め込みCSS で、各モードのCSSを提供できるようになります。例えば、Discourseのスタイリング変数をオーバーライドできます。

html[data-theme="dark"] {
  --primary: #ced6dd;
  --primary-low: #48566b;
  --secondary: #14181e;
  --tertiary: #2b7e8d;
}

お役に立てれば幸いです！

「いいね！」 6