My website provides the dark mode button, so when button was click, I need to change the color theme of Dicourse Embeds to keep the same with my website. But when I try to add class for body of embedded iframe, I found iframe.contentDocument is always null, and if use document.getElementById("discourse-embed-frame").contentWindow.document , the error as below: [image] I think there should be a way to config the embedded frame to allow cross-origin, but I still not found how to config after trying some config. The other way maybe to use postMessage, like document.getElementById("discourse-embed-frame").contentWindow.postMessage("darkMode"), but there needs to be an handler to handle the darkMode message in script, I haven’t found where to add it.

I’m having a similar challenge. Were you able to find a workaround? Because of the cross-origin issue, I can’t add any kind of marker on the iframe that my embedded CSS can use to figure out what colors to use: [image]

Not resolved yet. I haven’t received an official reply either, so I don’t know if all the official friends are on vacation.

(Friendly bump to see if we have any official guidance :slight_smile: )

There is an official way but only for official themes: Styling of Embedded Discourse That could help: app/assets/stylesheets/embed.scss 67e422c2d @import "./vendor/normalize"; @import "./vendor/normalize-ext"; @import "./common/foundation/base"; @import "./color_definitions"; @import "./common/components/buttons"; article.post { border-bottom: 1px solid var(--primary-low); img.avatar { border-radius: 50%; } &.deleted { background-color: var(--danger-low); } .quote .title { border-left: 5px solid var(--primary-very-low); padding: 10px 10px 0 12px; This file has been truncated. show original

Using offical latest feature, I have implemented it. If you still have requirements, you can refer to [图片] Automatic dark mode for embedded comments as well? Feature I have implemented it by using postMessage. The codes and its execution logic are as blow: [image] Code block ① adds an event listener in embedded Discourse iframe which will post message to my website that contains embedded Discourse iframe once embedded Discourse is loaded. When my website receives message from embedded Discourse, it will make a validation, as shown in code block ②, and if passed, call the setIframeStyle function to set embedded Discourse. The setIframeStyle function, ju…

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

产品支持

mikeguo (Mike) 2023 年2 月 9 日 09:45 8

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

话题		回复	浏览量
Automatic dark mode for embedded comments as well? Feature embedding	17	2583	2024 年11 月 6 日
How to solve cross-origin for embedded Discourse? Product Support	0	528	2022 年12 月 23 日
Trouble using embedding in dark mode Product Support embedding	3	610	2023 年8 月 12 日
How to customize appearance of discourse embeds? Product Support	4	1375	2022 年10 月 6 日
Background color of iFrame not working Product Support	2	6416	2022 年7 月 15 日

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

相关话题