How to set the background color of st.sidebar

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?

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

1 Like