How to set the background color of st.sidebar

Using Streamlit
1

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 sun and cannot get there:

st.markdown("""
<style>
sidebar .sidebar-content {
    background-color: #111 !important;
}
</style>
    """, unsafe_allow_html=True)

At the same time has anybody worked out a somewhat good css dark theme that could be shared that takes care of most of this?

Sidebar color change
2

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,
)
2 Likes
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
4

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 all the wonderful things that streamlit is doing!

5

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 later today if I get a chance to do some coding today.

3 Likes
6

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
}
3 Likes
7

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

8

Where should i place this part of code?

2 Likes
9

Hi @udaybhaskar, welcome to the Streamlit community!

You can place CSS like this example from earlier in the thread:

1 Like
10

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 menu and so on, everything defaults to the original.

Is there a way to prevent this?

11

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

13

awesome :pray: :pray: :pray: :pray: :+1: :+1: :+1: :+1:

14

You should inspect the HTML code of your Streamlit App using your browser. In my case, full code for setting backgroung color of sidebar is:
st.markdown("""

section[data-testid=“stSidebar”] div[class=“css-17eq0hr e1fqkh3o1”] {background-image: linear-gradient(#8993ab,#8993ab);color: white}

“”",unsafe_allow_html=True)

16

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