Background color of iFrame not working

I recently embedded some visualizations into a forum (powered by discourse) post and they look unfortunately terrible in dark mode because the iframes have transparent backgrounds.

So I tried to change the background color of the iframes. I found how and tested it on hackmd; it worked well. But when I submit it on the discourse forum, it doesn’t work! Dark mode prevails.

Here is the structure of code I am using:

<iframe width="100%" height="300" style="background-color: #FFFFFF" src="https://dune.com/embeds/1002945/1734962/fe28df65-99a3-4b98-8cb4-e97f132c8165" frameborder="0"></iframe>

1 Like

You’ll likely need to use custom CSS to set a custom background color for your iframe, as styles/classes are stripped out of all posts on Discourse by default.

For example, within a topic you could use:

<div data-theme-1>
<iframe width="100%" height="300" src="https://dune.com/embeds/1002945/1734962/fe28df65-99a3-4b98-8cb4-e97f132c8165" frameborder="0"></iframe>
</div>

And then in the custom CSS for the theme you’re using add:

div[data-theme-1] {
  background-color: #FFFFFF;
}

If you’re interested in whitelisting styles/classes on your site, this must be done with a plugin.

3 Likes

Thanks so much, that worked!

2 Likes