How to switch between dark mode and bright white mode in embedded Discourse

Support
1

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
image1826×146 25.5 KB

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.

2

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
image1146×604 29.7 KB

4

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

1 Like
6

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

1 Like
7

There is an official way but only for official themes: Styling of Embedded Discourse

That could help:

8

Using offical latest feature, I have implemented it.
If you still have requirements, you can refer to