如何在嵌入式Discourse中切换暗模式和亮白色模式

支持
1

我的网站提供了一个暗黑模式按钮，因此当按钮被点击时，我需要更改 Discourse Embeds 的颜色主题，以保持与我的网站一致。

但是，当我尝试为嵌入式 iframe 的 body 添加 class 时，我发现 iframe.contentDocument 始终为 null，并且如果使用 document.getElementById(\"discourse-embed-frame\").contentWindow.document，则会出现如下错误：

image
image1826×146 25.5 KB

我认为应该有一种方法可以配置嵌入式框架以允许跨域访问，但我尝试了一些配置后仍未找到。

另一种方法可能是使用 postMessage，例如 document.getElementById(\"discourse-embed-frame\").contentWindow.postMessage(\"darkMode\")，但这需要在脚本中有一个处理程序来处理 darkMode 消息，我还没有找到在哪里添加它。

2

我遇到了类似的挑战。您找到解决方法了吗？

由于跨域问题，我无法在 iframe 上添加任何标记，我的嵌入式 CSS 可以使用该标记来确定使用什么颜色：

image
image1146×604 29.7 KB

4

尚未解决。我也没有收到官方回复，所以我不知道所有官方朋友是否都在度假。

1 个赞
6

（友好地顶一下，看看是否有官方指导 :slight_smile: ）

1 个赞
7

有一个官方的方法，但仅适用于官方主题：Styling of Embedded Discourse

这可能会有帮助：

8

我使用了官方的最新功能，并已成功实现。
如果您仍有其他需求，可以参考：