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

How to set the background color of st.sidebar

Using Streamlit

gretzteam August 13, 2020, 3:28pm 3

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

1 Like

Topic		Replies	Views
Background-color Using Streamlit css	4	7177	November 19, 2021
Changing only sidebar background color Using Streamlit	4	12900	February 29, 2024
Custom CSS for sidebar: transparent background glitches Using Streamlit	3	1919	October 4, 2023
Theme Change using st.markdown Using Streamlit	3	3145	January 17, 2023
Sidebar color change Using Streamlit streamlitbot , discussion	8	2207	May 24, 2024

How to set the background color of st.sidebar

Related topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies