Sidebar color change

[Deepa_Sarojam]

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()

[kush_ks]

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.

[blackary]

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>
"""
)

[Deepa_Sarojam]

@kush_ks

div.st-emotion-cache-6qob1r.eczjsme3 {
            color: white;
            background-color: black;
            
        }

This worked Thank you

[Deepa_Sarojam]

This worked as well

[laithsiaj]

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

[blackary]

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

[laithsiaj]

@blackary Done