How to change the background of an expander?

🎈 Using Streamlit
1

How to change the background of an expander?

Hi guys, I have been working on a project using Streamlit and using an st.expander to show some information but I would like the expander background colour to be different (e.g. the expander background being white while the web page background is black). I was hoping one of you may have insight into doing this as i cannot find anything online?
Thanks!

1 Like
2

Hi @ERob,

Thanks for posting and welcome to the Streamlit Community Forum! :raised_hands:t5:

You can use custom CSS to modify the st.expander look. Here’s an example using your description:

https://customexpandercolor.streamlit.app/?embed=true

Code:

import streamlit as st

# Custom CSS 
st.markdown(
    '''
    <style>
    .streamlit-expanderHeader {
        background-color: white;
        color: black; # Adjust this for expander header color
    }
    .streamlit-expanderContent {
        background-color: white;
        color: black; # Expander content color
    }
    </style>
    ''',
    unsafe_allow_html=True
)

with st.expander("Expand"):
    st.write("Content inside the expander")

Happy Streamlit-ing! :balloon:

3 Likes
3

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