Fix iframe background for dark color scheme

[LukasMasuch]

Describe your changes

This PR fixes an issue with iframes where the background uses white instead of transparent if a dark background is configured. This only happens in Firefox and Safari; Chrome uses the correct background.

The reason is that we recently added the color-schema keyword to indicate the browser if the app is in dark or light mode. But this triggers an automatic behavior where the browsers adds a white background to iframes since it assumes that the iframe can only handle a light background. We have to tell the iframe that the iframe supports both light and dark color schemes to fix this.

GitHub Issue Link (if applicable)

• Closes streamlit v1.29.0 sets white backround to html component which is impossible to change (e.g. make transparent) #7813

Testing Plan

• Migrates e2e components test to playwright to also cover firefox and safari browsers.

---

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

[sfc-gh-kjavadyan]

Is this correct, that dark theme text in the iframe has black color?

[LukasMasuch]

Yes, we don't do anything to automatically change styles within the iframe. That is something a developer would need to take care of. For example, custom components get theme information injected.

[hoanq1811]

Hi @LukasMasuch
I upgraded it to the latest version (v1.30.0) but:
The white background still appears when I embed a customization table with the dark mode configuration on Chrome on macOS M1.
You can take a look the issue below:

This is my code:

table_html = f"""
<div style="position: relative;">
   <div id="copy-button-container">
        <button class="copy-button" id="btn-copy" style="float:right;">
            <img src="https://img.icons8.com/material-rounded/24/000000/copy.png"/>
        </button>
   </div>
   <table>
      <tr>
          <th>Calendar Year</th>
          <th>Volume</th>
     <tr>
     <tr>
          <th>12.32</th>
          <th>12.32</th>
     <tr>
   </table>
</div>
"""
    
# JavaScript code for clipboard.js
clipboard_js = """
    <script type="text/javascript">
        document.getElementById("btn-copy").addEventListener("click", function() {
            var table = document.getElementById('st-custom-table');
            var range = document.createRange();
            range.selectNode(table);
            window.getSelection().addRange(range);
            var successful = document.execCommand('copy');
            window.getSelection().removeAllRanges();
            if (successful) {
                alert('Table copied to clipboard!');
            } else {
                alert('Unable to copy table.');
            }
        });
    </script>
"""
# Display the custom CSS and JavaScript
st.components.v1.html(table_html + clipboard_js, scrolling=True)

Same issue when I try running the sample code on the document site: https://docs.streamlit.io/library/components/components-api

• Streamlit version: 1.30.0
• MacOS: Sonoma, Version: 14.0
• Chrome: 120.0.6099.62 (arm64)

[erikvanzijst]

hoanq1811

Same for me, not fixed (1.31.0 on M1 Mac in Chrome & Safari).

CC @LukasMasuch

[LukasMasuch]

@hoanq1811 I deployed the code here. But the issue is not reproducible for me in 1.31 (the background is transparent and not white):

[LukasMasuch]

@erikvanzijst Do you have a code snippet for this to help with reproducing this issue?