user input stuck in dark mode when using chat_message

[ss1]

I’m attempting to get the user and chat backgrounds to be different colors. I’m running my app locally and I’m running a custom color theme using the config.toml file.

This is what it looks like with no user background-specific formatting.

This is what it looks like with markdown to adjust stChatMessage:

st.markdown(“”"
div[data-testid=“stChatMessage”] {
background-color: #D79233;
}
“”", unsafe_allow_html=True)

This is what it looks like when I attempted the method described in this post.

I’m trying to get the user message to be the light pink color you can see at the corners.

It seems like the issue is that the container is overlaid by the stChatMessage object, but I’m not exactly sure how to adapt the class definition explained in the linked post to stChatMessage instead of the container.

[mathcatsand]

import streamlit as st

css = """
<style>
    .stChatMessage:has([data-testid="stChatMessageAvatarAssistant"]) {
        background-color: #00f0f020;
    }
</style>
"""
st.html(css)

st.title("Meow")

with st.chat_message("user"):
    st.markdown("Meow meow meow.")
with st.chat_message("assistant"):
    st.markdown("ニャーニャーニャー")