Custom CSS for sidebar: transparent background glitches

Using Streamlit
1

Hi All, I’m using custom css to make the sidebar transparent, however, when changing pages in a mutlipage app, the color glitches for a moment showing the original color before making the background transparent. I’m wondering if there is an easy way to fix this. Below is the code snippet and gif sample. Thanks

sidebar_bg = f"“”

[data-testid="stSidebar"] {{ background: rgba(0,0,0,0); }}

“”"
st.markdown(sidebar_bg, unsafe_allow_html=True)

sidebar_bg

2

Based on the code snippet you provided, it appears you want to set the background of the sidebar to be transparent. However, there are some issues in your code:

  1. There are extra double quotes in your sidebar_bg variable assignment. These should be removed.
  2. The CSS selector [data-testid="stSidebar"] should be enclosed in curly braces {} for proper CSS syntax.
  3. The Streamlit st.markdown function is used to render Markdown text, so the CSS code should be enclosed within triple backticks (```) to indicate a code block.

Here’s the corrected code:

sidebar_bg = """
[data-testid="stSidebar"] {
  background: rgba(0, 0, 0, 0);
}
"""

st.markdown(sidebar_bg, unsafe_allow_html=True)

With these corrections, the CSS code should be applied properly to make the sidebar background transparent in your Streamlit app.Hope that helps

3

Solution: ok, I just realized that you can change sidebar color in config.toml. More details here - https://docs.streamlit.io/library/advanced-features/theming