5.3 data-bs-theme dark IFRAME white background

[cybercussion]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

Paypal Integration for example in dark has a white background. I attempted to find what is setting it to white and so far haven't been able to debug exactly whats doing it. In light mode the default is transparent like expected. I've attempted to set data-bs-theme light at a level above the IFRAME with no effect.

Reduced test cases

• use data-bs-theme="dark" on html tag
• embed PayPal integration via https://developer.paypal.com/sdk/js/reference/ or https://developer.paypal.com/demo/checkout/#/pattern/style

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox

What version of Bootstrap are you using?

5.3.0

[cybercussion]

vs

[cybercussion]

Notice it also responds similarly with

<meta name="color-scheme" content="dark">

[CyrilKrylatov]

On https://developer.paypal.com/demo/checkout/#/pattern/style you should find a way to remove the background-color that we can see on the style attribute to remove the white background on the iframe to make it transparent.

Anyway I don't think that's an issue from Bootstrap.

[julien-deramond]

Anyway I don't think that's an issue from Bootstrap.

I agree with @CyrilKrylatov. From what I understand, I don't think that's an issue from Bootstrap since the <iframe> is independent of Bootstrap's dark mode defined in the "main" content. So closing it.

[TravsVoid]

I had the same issue but with my Disqus comment section. When I used data-bs-theme="dark" it caused the Disqus iframe to turn white instead of transparent. The only way I found to fix it was to apply the code below to the iframe which makes it transparent again for dark mode.

iframe {
  color-scheme: light;
}

[androidacy-user]

I had the same issue but with my Disqus comment section. When I used data-bs-theme="dark" it caused the Disqus iframe to turn white instead of transparent. The only way I found to fix it was to apply the code below to the iframe which makes it transparent again for dark mode.

iframe {
  color-scheme: light;
}

so this could be fixed on bootstrap's side. we're hitting the same issue with disqus comments since they use iframes.

[dougwaldron]

Anyway I don't think that's an issue from Bootstrap.

I agree with @CyrilKrylatov. From what I understand, I don't think that's an issue from Bootstrap since the <iframe> is independent of Bootstrap's dark mode defined in the "main" content. So closing it.

Yes and no. It's true that styles defined in Bootstrap aren't applied inside the iframe, but the color-scheme property, if set, does get passed to the iframe, which affects how it's displayed. See this CodePen for examples.

It seems to me that Bootstrap should set iframe { color-scheme: normal; } but that would be a breaking change I guess.

[lealceldeiro]

I had the same issue but with my Disqus comment section. When I used data-bs-theme="dark" it caused the Disqus iframe to turn white instead of transparent. The only way I found to fix it was to apply the code below to the iframe which makes it transparent again for dark mode.

iframe {
  color-scheme: light;
}

[data-bs-theme="dark"] {
    color-scheme: unset;
}

Also does the trick

[ishields]

Ran into this same issue with our TrustPilot widget. Not sure what the impacts are setting this everywhere, so for now I went with a super scoped approach that just targets that specific iframe.

@julien-deramond This does feels like something Bootstrap should address. The issue doesn't happen when you remove bootstrap css (or if you remove dark color scheme) and is affecting a variety of different iframes (for me it was TrustPilot but there are more examples above). This seems like it should be reopened and considered again possibly. Though there's a work around of overriding the color scheme that Bootstrap sets, feel like Bootstrap shouldn't aversely affect iframes like it currently seems to be doing. This one also takes quite a while to track down because of how strange it is. I was lucky in finding this thread early in the research.

.trustpilot-widget iframe {
  color-scheme: light;
}

[julien-deramond]

Thanks all for your feedback. I reopen it to remind me to check all these use cases.