I have implemented it by using postMessage. The codes and its execution logic are as blow:
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, just shown in code block ③, pass color mode, “dark” or “light”, to iframe by calling postMessage. In addition, once the dark mode switched, the function could be called to keep embedded Discourse same color mode with my website.
Code block ④ allows embedded Discourse to be able to process the color mode message sent from my website. Here I toggle the color mode by switching class name to the body tag.
Additionally, code block ① and ④ are added by Discourse admin page, as blow:
And custom css classes should be added as blow:
