Changing the Background Color of the Expander Element and Chat_Message?

Using Streamlit
1

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?

3

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

4

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

1 Like
5

Any updates?

6

I’m not sure what element your ‘. clickable’ points to, but referring to the other two you provided, it correctly displays the result you want. :point_down:

import streamlit as st
st.html(
"""
    <style>
    .clickable {
        color: rgb(46, 154, 255);
        text-decoration: underline;
    }
    
    div[data-testid="stChatMessageContent"] {
        background-color: white;
        color: black; # Expander content color
    } 
    
    div[data-testid="stChatMessage"] {
        background-color: white;
        color: black; # Adjust this for expander header color
    }
    </style>
""")

with st.chat_message(name='A'):
    st.write('Hello Streamlit')

1717152489712
17171524897121007×265 5.85 KB

7

@lkdd-ao your solution works really well thank you for the solution. Do you (or anyone else) know how I could get TWO different colors (i.e. one for the user and one for the other person/bot)? Using the your code, I can change the color of all messages, but not have them be user specific. The CSS changes both the User and the Assistant types.

if "username" == "Bob":
    color = "black"
else:
    color = "gray"
    
st.html(
    f"""
        <style>
        div[data-testid="stChatMessage"] {{
            background-color: {color};
        }}
        </style>
    """)

Something like this also doesn’t work, it just sets all messages to be the one color. is there a way to make the st.html statement have two separate styles, one for each user?