嵌入式评论也自动开启暗模式吗？

贡献 功能
19

我确认上述方法仍然有效，但如果不用从截图中输入代码就好了 :slight_smile: 所以，这里是稍作更新的版本：

步骤

  1. 评论 iframe 渲染完成，并向主浏览器窗口发送消息，告知已完成。
  2. 浏览器查询其深色/浅色模式设置，并将值发送回 iframe。
  3. iframe 接收消息，并根据深色/浅色模式设置设置一个 data-attribute、class 或类似的属性。

代码

  1. iframe 加载后，向父窗口发送通知。这需要在 Discourse 的 Admin -> Customize -> (选择主题) -> Edit CSS/HTML -> Embedded Header 中输入。
<script type="text/javascript">
    window.addEventListener("load", (event) => {
        window.parent.postMessage("iframe loaded", "*");
    }, false);
</script>
  1. 在主窗口中处理此传入的触发器。此代码位于您的博客网站：
<script type="text/javascript">
  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();
    }
  };
</script>
  1. 在 (1) 中的 <script> 块中，添加一个监听器来接收 notifyFrameStyle 发送的主题消息：
    window.addEventListener("message", (event) => {
        const payload = event.data;
        if (payload.theme) {
          // 使用主题设置执行某些操作；我将 `data-theme` 属性设置在 iframe 的 `<html>` 上，
          // 但您可能希望设置一个 class 属性或类似的属性
          document.documentElement.setAttribute("data-theme", payload.theme);
        }
    }, false);

样式

在 Admin -> Customize -> (选择主题) -> Edit CSS/HTML -> Embedded CSS 中，您现在可以为每种模式提供 CSS。例如，您可以覆盖 Discourse 的样式变量：

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

希望这有帮助！

6 个赞