Changing only sidebar background color

[Giang_Vu]

The default color customization is quite limit for me. Do we have a way to change only the sidebar’s color without touching other visualizations?
Thanks for your help!

[edsaac]

You could use a CSS selector to modify the background color of the sidebar:

import streamlit as st

st.markdown("""
<style>
    [data-testid=stSidebar] {
        background-color: #ff000050;
    }
</style>
""", unsafe_allow_html=True)

with st.sidebar:
    "## This is the sidebar"

Using a background color with transparency can improve how the app looks like between dark and light theme.

[ShockWave]

The problem with doing CSS styling as you’ve shown above is that the app will first show the default sidebar color, as defined in your config.toml file, and it will then load the extra CSS styling that you’ve defined in your code after the fact.
There’s a delay between those two things, and this (at best) creates a “flashing effect” or (at worst) displays the default colors for a second or two before it switches over to the new CSS styling.

Having CSS styling capabilities would be excellent, but I don’t see Streamlit making this any kind of priority.
What would be very helpful, and could be implemented very quickly, is to give us the capability of defining the background color for the sidebar as a separate config.toml variable.
At the moment we have to use secondaryBackgroundColor, and this applies a color onto BOTH the sidebar as well as for most interactive widgets.

I like using a dark background color for my sidebar, but you can’t have this same color for most interactive widgets.
Therefore being able to separate these two would be very useful.

[Giang_Vu]

This is what I found when inspect html element. We can play with the css of the sidebar (.css-nzvw1x ) to change its color. I did not remember the others, but it may relate to sidebar’s text and highlight.

st.markdown(
    """
<style>
.css-nzvw1x {
    background-color: #061E42 !important;
    background-image: none !important;
}
.css-1aw8i8e {
    background-image: none !important;
    color: #FFFFFF !important
}
.css-ecnl2d {
    background-color: #496C9F !important;
    color: #496C9F !important
}
.css-15zws4i {
    background-color: #496C9F !important;
    color: #FFFFFF !important
}
</style>
""",
    unsafe_allow_html=True
)