Change backgroud color - streatmlit.component.v1.html

streatmlit.component.v1.html is great. I have a question, can I change the background color of the iframe displaying the html? I don’t want to change html content itself. Thank you!

Hello @amira , welcome to the community:

If you can’t play with the HTML content, you could try the CSS hack (if you need to search the forum for more topics on this):

How does it work?

You build a CSS selector that selects the iframe tag for your component in your app (you can find it by browsing the devtools component of your browser), then you apply a background-color: red; rule to it. Then you pass it through st.markdown(..., unsafe_allow_html=True) to interpret HTML/CSS globally in the app

import streamlit as st
import streamlit.components.v1 as components

st.title("Red component")

<style>iframe {background-color: red;}</style>
""", unsafe_allow_html=True)
components.html("<div>Hello world</div>")

I’d actually recommend you to try to prepend the CSS rule to your html content too, and see what’s the best:

import streamlit as st
import streamlit.components.v1 as components

st.title("Yellow component")

html_content = "<div>Hello world</div>"
yellow_background = "<style>:root {background-color: yellow;}</style>"
components.html(yellow_background + html_content)

Happy Streamlitin’ :balloon:

1 Like