I used the following snippet taken from here to make the background of the app black: st.markdown(""" <style> body { color: #fff; background-color: #111; } </style> """, unsafe_allow_html=True) How can I apply the same background to the st.sidebar? I tried every combination under the s…

You can easily change the sidebar color via theming nowadays. Just add the following text to your config file (in .streamlit/config.toml) to e.g. make the sidebar orange: [theme] secondaryBackgroundColor="#FFA421" There are also more options, see our theming docs

It should be something like this, where you can put any color you’d like in the linear-gradient argument: st.markdown( """ <style> .sidebar .sidebar-content { background-image: linear-gradient(#2e7bcf,#2e7bcf); color: white; } </style> """, unsafe_allow_html=True, )

Thanks! This gave me control over the sidebar. However by doing this I realize that there is more to this than setting a dark background -> text, selectbox and other components need work. I guess it’s better to wait for a supported dark theme at this point… Thanks

Thank you for this workaround, @randyzwitch ! This worked well on my streamlit v.0.71.0. However, I just tried updating my streamlit version to 0.72 and resulted in the background reverting back to the default color. Is there a new workaround or I should stick with 0.71 for now? Thank you again for …

As part of work towards formally supporting themes in Streamlit, we’ve been re-factoring the codebase. So the CSS selectors will be changing. The quickest way to fix this would be to use your browser’s developer tools to find what .sidebar .sidebar-content changed to. I’ll try to post the answer la…

This is what I used to change sidebar colour for anyone interested. Thanks for the update @randyzwitch , looking forward to seeing how theme support looks! .css-1aumxhk { background-color: #011839; background-image: none; color: #ffffff }

i am unable to change the color of sidebar, How can i change it?

[image] j0nnyr0berts: .css-1aumxhk { background-color: #011839; background-image: none; color: #ffffff } Where should i place this part of code?

Hi @udaybhaskar , welcome to the Streamlit community! You can place CSS like this example from earlier in the thread: [image] How to set the background color of st.sidebar Using Streamlit It should be something like this, where you can put any color you’d like in the line…

I have done some experiments with manipulating the CSS however, I believe, it is better to wait for official support. I tried to change the background colors and border of different elements from the “reddish” default to something else, but after inputting some values, selecting items from a drop m…

Thank you for kindly sharing this @randyzwitch ! I was able to display Google Data Studio embedded graphs with this block of code :smile:

How to set the background color of st.sidebar

Using Streamlit

Topic		Replies	Views
Changing only sidebar background color Using Streamlit	3	14154	March 1, 2023
Sidebar color change Using Streamlit streamlitbot , discussion	7	2701	May 22, 2024
Unable to change text color of Page Navigation elements in sidebar Using Streamlit discussion	2	307	December 20, 2024
Background-color Using Streamlit css	3	7265	June 3, 2020
Change backgroud Using Streamlit	13	62437	May 17, 2024

How to set the background color of st.sidebar

Related topics