Sidebar color change

Using Streamlit
,
1

Hi all,

I used the below code, but I cannot change the SideBar color to blue.

def add_custom_css():
    st.markdown(
        """
        <style>
        /* Change the background color of the sidebar */
        .sidebar .sidebar-content {
            background-color: #31333F;
        }
        /* Change the text color of the sidebar */
        .sidebar .sidebar-content {
            color: blue;
        }
        </style>
        """,
        unsafe_allow_html=True
    )

# Call the functions to apply the customizations
add_custom_css()
1 Like
2

I couldn’t use the div tags from your code to modify the color of the sidebar. However, this version worked for me

def add_custom_css() -> None:
    st.markdown(
        """
        <style>
        div.st-emotion-cache-6qob1r.eczjsme3 {
            color: white;
            background-color: black;
            
        }
        </style>
        """,
        unsafe_allow_html=True
    )

add_custom_css()

Your response seems similar to the one mentioned here, but it no longer works, unfortunately.

Additionally, the drawback of using my code is that if a new streamlit version is released in the future, the div tags could get renamed.

3 Likes
3

Here’s a simpler selector that should be more robust to version changes in streamlit:

import streamlit as st

st.html(
    """
<style>
[data-testid="stSidebarContent"] {
    color: white;
    background-color: red;
}
</style>
"""
)
3 Likes
4

This worked :slight_smile: Thank you

1 Like
5

This worked as well :slight_smile:

1 Like
6

@blackary Can you please help me with my issue? I’ll be thankful :slight_smile:

1 Like
7

@laithsiaj Please make a new post and different members of the forum can try and answer your question

8

@blackary Done

1 Like
9

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