Formatting Date Picker

Using Streamlit
1

Summary

I’ve custom theme definition with colors conformity to our brand. Design requirement is to have colored background on sidebar and text with same color on white background on mai window.

However, with some widgets this case some untended side effects as header blue background. How Can I overwrite the styles for the dat picker?

image
image2104×1059 88.4 KB

Steps to reproduce

use the following config.toml

Code snippet:

[theme]
base="dark"
primaryColor="#778899"
backgroundColor="#FFFFFF"
secondaryBackgroundColor="#2d408d"
textColor="#2d408d"
font="sans serif"

If applicable, please provide the steps we should take to reproduce the error or specified behavior.

Expected behavior:

White background

Actual behavior:

no error, missing styling opportunities

Debug info

  • Streamlit version: 1.26.0
  • Python version: 3.10.12
  • Using Conda
  • OS version: MacOs
  • Browser version: different
2

Hi @mauermbq ,

You can apply custom CSS either using markdown or using the Styleable Container module from streamlit extras.

from streamlit_extras.stylable_container import stylable_container


with stylable_container(
    "datepicker",
    """
    input {
        color: white;
        }
    div[role="presentation"] div{
    color: white;
    }

    div[class="st-b3 st-d0"] button {
        color:white
        };

    """,
):
    st.date_input("Test")

or without streamlit extras (just using st.markdown)

st.date_input("Test")
st.markdown(
    """
    <style>
  div[class="stDateInput"] div[class="st-b8"] input {
        color: white;
        }
    div[role="presentation"] div{
    color: white;
    }

    div[class="st-b3 st-d0"] button {
        color:white
        };
        </style>
""",
    unsafe_allow_html=True,
)

image
image751×444 15.1 KB

Hope it helps!

3

Thank you, with markdown I already tested.
Styleable containers are quite useful extension - eventually a candidate for the main.
However the styles didn’t change the text color in the date picker as in your screenshot (both do not work containers and markup).
it just made it inverse in the field, but not in the pop-up
image

Is there any documentation or reference about the current style sheet in order to check which styles need to be changes?

4

@mauermbq that was a mistake on the CSS selector. Try this:

    """
    <style>
  div[class="stDateInput"] div[class="st-b8"] input {
        color: white;
        }
    div[role="presentation"] div{
    color: white;
    }

    div[data-baseweb="calendar"] button {
        color:white
        };
        </style>
""",
    unsafe_allow_html=True,
)
5

great - thank you!
Final question: is there any reference or style examples for other form elements as well?

6

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