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

**URL:** https://meta.discourse.org/t/how-to-switch-between-dark-mode-and-bright-white-mode-in-embedded-discourse/249542
**Category:** Support
**Created:** [December 21, 2022, 1:06am UTC](https://meta.discourse.org/t/how-to-switch-between-dark-mode-and-bright-white-mode-in-embedded-discourse/249542 "2022-12-21T01:06:22Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![mikeguo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mikeguo/32/278830_2.png) [@mikeguo](https://meta.discourse.org/u/mikeguo)
#### Post date: [December 21, 2022, 1:06am UTC](https://meta.discourse.org/t/how-to-switch-between-dark-mode-and-bright-white-mode-in-embedded-discourse/249542/1 "2022-12-21T01:06:22Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/2/9/6/29624779203163f7d0555ca566bd2618a9d2548e.png)

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.

---

<div class="post-metadata">

### Author: ![kirupa](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kirupa/32/374711_2.png) [@kirupa](https://meta.discourse.org/u/kirupa)
#### Post date: [December 29, 2022, 9:44pm UTC](https://meta.discourse.org/t/how-to-switch-between-dark-mode-and-bright-white-mode-in-embedded-discourse/249542/2 "2022-12-29T21:44:50Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/7/0/7/707b442ac62f3846941af513bfd72df1d2cdf96c.png)

---

<div class="post-metadata">

### Author: ![mikeguo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mikeguo/32/278830_2.png) [@mikeguo](https://meta.discourse.org/u/mikeguo)
#### Post date: [December 30, 2022, 12:55am UTC](https://meta.discourse.org/t/how-to-switch-between-dark-mode-and-bright-white-mode-in-embedded-discourse/249542/4 "2022-12-30T00:55:13Z")

</div>

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

---

<div class="post-metadata">

### Author: ![kirupa](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kirupa/32/374711_2.png) [@kirupa](https://meta.discourse.org/u/kirupa)
#### Post date: [January 10, 2023, 2:49am UTC](https://meta.discourse.org/t/how-to-switch-between-dark-mode-and-bright-white-mode-in-embedded-discourse/249542/6 "2023-01-10T02:49:35Z")

</div>

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

---

<div class="post-metadata">

### Author: ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [February 3, 2023, 6:54pm UTC](https://meta.discourse.org/t/how-to-switch-between-dark-mode-and-bright-white-mode-in-embedded-discourse/249542/7 "2023-02-03T18:54:31Z")

</div>

There is an official way but only for official themes: [Styling of Embedded Discourse](https://meta.discourse.org/t/styling-of-embedded-discourse/31956)

That could help:

> <https://github.com/discourse/discourse/blob/67e422c2d46d035a3ce96415b00aed295d837ee2/app/assets/stylesheets/embed.scss>

---

<div class="post-metadata">

### Author: ![mikeguo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mikeguo/32/278830_2.png) [@mikeguo](https://meta.discourse.org/u/mikeguo)
#### Post date: [February 9, 2023, 9:45am UTC](https://meta.discourse.org/t/how-to-switch-between-dark-mode-and-bright-white-mode-in-embedded-discourse/249542/8 "2023-02-09T09:45:10Z")

</div>

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?](https://meta.discourse.org/t/automatic-dark-mode-for-embedded-comments-as-well/184347/10):
>
> 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, ju…
