Changing the Background Color of the Expander Element and Chat_Message?

Hey guys, just looking for ways to customize the appearance of the streamlit app. I wanted to change the background color of the expander and also bg color of the profile icons when using chat_message.

Pre-Requisites

  • Locally Ran
  • Python 3.11.4, Streamlit 1.28.1

I have configured my .toml file as such:

[theme]
base="light"
primaryColor="#5c0f8b"
backgroundColor="#e0e0e0"
secondaryBackgroundColor="#ffffff"
textColor="#262730"
font="sans serif"

The expander takes on the grey hexcolor as a result. I wanted to make it white.

st.markdown(
"""
    <style>
    .clickable {
        color: rgb(46, 154, 255);
        text-decoration: underline;
    }
    
    .streamlit-expanderContent {
        background-color: white;
        color: black; # Expander content color
    } 
    
    .streamlit-expanderHeader {
        background-color: white;
        color: black; # Adjust this for expander header color
    } 
""", unsafe_allow_html=True)

I am still looking into the Chat_Message background chat color, but it did not work when I tried doing it through CSS directly.

At first, I tried specifically changing the emotion cache element, but I think this class changes based on the browser cache session.

st-emotion-cache-1h9usn1

So I decided to stay away. Any ideas how to change this then?

Did you find any ways to do that? Im struggling with it too

Same here: .streamlit-expanderContent and .streamlit-expanderHeader do nothing, at least for streamlit==1.31.1.