How to change the color of the red/yellow bar on top of the streamlit app page?

Using Streamlit
1

How would I change the color of this line?

red-yellow-line
red-yellow-line1536×329 6.38 KB

2

I’ve not actually tested if this works but in theory, the following should do it.


st.markdown(
    """
        <style>
            [data-testid="stDecoration"] {
                background-color: aqua;
                background-image: none;
            }
        </style>
    """,
    unsafe_allow_html=True
)

The above assumes you’re just wanting a solid colour. If you want to change the two existing colours and keep a gradiant then the following.


st.markdown(
    """
        <style>
            [data-testid="stDecoration"] {
                background-image: linear-gradient(90deg, rgb(255, 75, 75), rgb(255, 253, 128));
            }
        </style>
    """,
    unsafe_allow_html=True
)
3

Hey thanks for the response. I just want it to be removed or turn the color to black. I tried both codes but nothing happened. It’s still the exact same colors as before.

4

If you want it hidden then the following works for me locally. I don’t know if there is something different in community cloud that will stop it working.


st.markdown(
    """
        <style>
            [data-testid="stDecoration"] {
                display:none
            }
        </style>
    """,
    unsafe_allow_html=True
)

The following also worked to turn it black.

st.markdown(
    """
        <style>
            [data-testid="stDecoration"] {
                background-color: black;
                background-image: none;
            }
        </style>
    """,
    unsafe_allow_html=True
)
5

@coffeeforkevin Instead of markdown with unsafe html set to true, you can use st.html. This is relatively more apt used of APIs.

6

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.