htmlcssstreamlit

How to change text color of widgets in streamlit?


I don't have knowledge of html/css and trying to change the color of text of a widget(toggle button) in streamlit app.

enter image description here

It is <p>Add Treatment Dates</p> in the Image that I want to color it in white.

Code I have tried but didn't work:

st.markdown(  """
<style>
[data-testid="stWidgetLabel"] {
    color: white;
    background-color: #111;
}
</style>
""", unsafe_allow_html=True)
st.markdown(  """
<style>
[data-testid="stWidgetLabel"] p{
    color: white;
    background-color: #111;
}
</style>
""", unsafe_allow_html=True)
st.markdown(  """
<style>
[data-testid="stWidgetLabel"] div{
    color: white;
    background-color: #111;
}
</style>
""", unsafe_allow_html=True)
st.markdown(  """
<style>
div[data-testid="stWidgetLabel"] {
    color: white;
    background-color: #111;
}
</style>
""", unsafe_allow_html=True)

Solution

  • Try setting the !important flag in your examples' colour property as follows :

    st.markdown("""
    <style>
    [data-testid="stWidgetLabel"] p{
        color: white !important;
        background-color: #111;
    }
    </style>
    """, unsafe_allow_html=True)
    

    I have only set it in the second example. If this doesn't work you may try it in other examples. Usually, this happens because the colour property might be overridden by Streamlit itself. Using this flag will increase your declaration's priority.