How to change background color for SVG graphics with CSS?

Frank6 · October 28, 2024, 10:43am

Dear community! First of all thanks for providing Streamlit. It is such a great and wonderful tool and the app I develop would never be in its shape it is today without Streamlit (https://amfupapp.streamlit.app).

My system at the moment:
Python 3.12.4
Streamlit 1.39.0

I would like to enhance the user experience by introducing the dark app theme. I’m sticking with dark theme and SVG pictures at the moment. It is already there, but with my SVG graphics I come to the point that in dark mode the graphics get weird, below you find an example:

Light mode:

Same picture in Dark mode:

Inverting is no option for me as there are some graphics with a photo like style that would result in a negative of the picture. So I’m looking for a way to set the background of the SVG to white. I’m not experienced in CSS but my impression is that with CSS this could be done. So I would like to ask for your kind assistance. The preferred solution would be not to modify the SVG data itself but to inject some CSS code into the columns I use to display the SVG. Any hep would be great! No idea, if it is relevant for a solution, but in the text parts st.write also in combination the LaTex expression is used. Any help would be great, thank you in advance!

edsaac · October 28, 2024, 12:28pm

With CSS, you can target the div containing the SVG images. This will affect all images though:

Dark	Light
image1540×1057 86.3 KB	image1540×1057 84.9 KB

div[data-testid="stImageContainer"]{
    background-color: pink;
    padding: 0.5rem;
}

How are the SVGs generated in the first place? It might be easier to set up a background color at that point than to modify them after.

Frank6 · October 28, 2024, 1:33pm

Thank you so much for giving support. This already looks very promising, I will give it a try! Please apologize my lack of knowledge regarding CSS Edwin (I really have to work on it) - so I would use a command like the following to implement it?

css = f"“”
div[data-testid=“stImageContainer”]{
background-color: pink;
padding: 0.5rem;
}
“”"
st.image(f"{css}")

Is this what I have to provide before the SVG are shown with something like st.image(svg_pic, width=300), where svg_pic is the path to my pictures?

You asked about the SVG themself. They are located in a folder /svgs/pic1.svg, /svgs/pic2.svg, …, about 500 of them, different width and height. A typical example of simple SVG is the following:

I could imagine a batch job that inserts code in all the SVG, but I ask myself if this would be easier than the solution you proposed. A white background in Dark and White would do the job.

edsaac · October 28, 2024, 2:46pm

Almost, but not quite. CSS injections can be done using st.html(see st.html - Streamlit Docs). In your Python application, you’d write something like this:

css = """
div[data-testid="stImageContainer"]{
    background-color: pink;
    padding: 0.5rem;
}
"""
st.html(f"<style>{css}</style>")

I thought the SVGs were generated programmatically, like using some plotting library. Since that is not the case, the CSS injection should be easier.

Frank6 · October 28, 2024, 8:01pm

Fantastic - works perfectly, you saved my day, thank you so much! Edwin, may I ask a further question that is strongly connected with the dark/light topic and CSS of this thread? If you say please open another topic, this would be absolutely fine for me (and would probably help to keep things separated). The second issue with dark app schemes is as follows:
I use the absolutely beautiful Custom Component streamlet-tree-select (New Component: streamlit-tree-select, a simple and elegant checkbox tree). So useful to display and select hierarchies! Here something similar happens in dark mode: text is nearly invisible. How could I fix this with CSS? The issue was raised by others in the discussion linked above, but unfortunately it was never fixed. Here an example:

edsaac · October 29, 2024, 1:06pm

That is a different issue and it is more difficult because custom components live inside an iframe, and, afaik, you cannot target the style within an iframe with CSS alone. This seems to be a known issue for that component, and it was fixed but they never updated the package in PyPI:

github.com/Schluca/streamlit_tree_select

Streamlit Dark mode accessibility issue

opened 11:26PM - 22 Apr 24 UTC

netnem

![image](https://github.com/Schluca/streamlit_tree_select/assets/32517635/b7ba6a…4d-d379-4b16-b2fc-e59619f44984) Repo steps: set .streamlit config.toml: ``` [theme] base = 'dark' ``` Use default example for tree_select. ``` # Create nodes to display nodes = [ {"label": "Folder A", "value": "folder_a"}, { "label": "Folder B", "value": "folder_b", "children": [ {"label": "Sub-folder A", "value": "sub_a"}, {"label": "Sub-folder B", "value": "sub_b"}, {"label": "Sub-folder C", "value": "sub_c"}, ], }, { "label": "Folder C", "value": "folder_c", "children": [ {"label": "Sub-folder D", "value": "sub_d"}, { "label": "Sub-folder E", "value": "sub_e", "children": [ {"label": "Sub-sub-folder A", "value": "sub_sub_a"}, {"label": "Sub-sub-folder B", "value": "sub_sub_b"}, ], }, {"label": "Sub-folder F", "value": "sub_f"}, ], }, ] return_select = tree_select(nodes) st.write(return_select['checked']) ``` At least in this case, text should be white or to "follow streamlit theme"

Frank6 · October 29, 2024, 7:19pm

Thank you for your answer, Edwin. So, in GitHub there is a commit for request #8 by the owner of streamlit_tree_select (Schluca) that should fix the problem (contributed by BlueGob). Schluca was asked several times to update in PyPI but, as you confirmed, this never happened. This is really a pity as the component was praised by so many user and I’m sure that the demand on dark mode will raise for several reasons (OLED displays, ergonomic, …). Is it possible to fork the repo and publish it - maybe after renaming, referring to the source and respecting the corresponding license - in PyPI? In order to reduce maintenance efforts I could imagine that an easy “pip install streamlit_tree_select_whatever_new_name” would be a better approach compared to the solution (more a hack) that was proposed, namely replacing a special css-file in the python environment. What do you think?

edsaac · October 29, 2024, 8:34pm

Of course! If the component was ready to be used with the code as it stands right now in GitHub, you could even install it with pip directly by clonning the repo:

pip install git+https://github.com/Schluca/streamlit_tree_select

However, that will raise this exception:

StreamlitAPIException: No such component directory: '/home/user/venv/lib/python3.12/site-packages/streamlit_tree_select/frontend/build'

Because this component was being made using React (I think) and it needs to be built before Streamlit can actually use it. So just republishing a fork of the repository won’t be enough. There is a bit more info in the “Create a bi-directional component” section at Intro to custom components - Streamlit Docs about this.

edsaac · October 29, 2024, 9:25pm

It looks like people have been forking and republishing already! For example, check streamlit-tree-select2 · PyPI from GitHub - wenyuzhao/streamlit_tree_select: A simple and elegant checkbox tree for Streamlit.

`streamlit-tree-select2`

There is this other fork but they set the background color to always be white:

`streamlit-tree-select-dark`

Frank6 · October 30, 2024, 8:18am

Edwin, this are mind blowing news! I did not expect that there is a PyPI package out there fixing the dark mode - so I didn’t even try. Instead I started reading the documentation for deployment on PyPI . Thank you for your search, I just released a new version of my app and voila.

Your support was extraordinary, Edwin. I am glad that people like you help the beginners and guide them into the right direction. This took the app to a new level in the last few days. I hope that it will help many users to pass the radio amateur exam.

system · November 1, 2024, 8:19am

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
How to change the background color of my Streamlit app? Using Streamlit	6	9156	January 16, 2024
Can't add background color with css Using Streamlit	2	1945	August 15, 2022
Background-color Using Streamlit css	4	6918	November 19, 2021
Streamlit defined css variables are not working properly Using Streamlit css , debugging	0	81	July 24, 2024
Change backgroud color - streatmlit.component.v1.html Using Streamlit	2	2047	February 11, 2024

How to change background color for SVG graphics with CSS?

streamlit-tree-select2

streamlit-tree-select-dark

Related Topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies

`streamlit-tree-select2`

`streamlit-tree-select-dark`