我通过使用 postMessage 来实现。代码及其执行逻辑如下:
代码块 ① 在嵌入的 Discourse iframe 中添加了一个事件监听器,该监听器将在嵌入的 Discourse 加载完成后,向嵌入 Discourse iframe 的我的网站发送消息。
当我的网站收到来自嵌入 Discourse 的消息时,它将进行验证,如代码块 ② 所示,如果验证通过,则调用 setIframeStyle 函数来设置嵌入的 Discourse。
setIframeStyle 函数,如代码块 ③ 所示,通过调用 postMessage 将颜色模式(“dark”或“light”)传递给 iframe。此外,一旦切换到暗模式,就可以调用该函数来使嵌入的 Discourse 与我的网站保持相同的颜色模式。
代码块 ④ 允许嵌入的 Discourse 处理从我的网站发送的颜色模式消息。在这里,我通过切换 body 标签的类名来切换颜色模式。
此外,代码块 ① 和 ④ 是通过 Discourse 管理页面添加的,如下所示:
并且自定义 CSS 类应该如下添加:


