Date Input on Dark Theme

So, I have a date input I would really like to use the dark theme on my project, but the problem is that it seems to me that everytime I click on the box (so that it opens the calendar) the background color is always gray, no matter what. And thatโ€™s my problem, because my text color is white, so it becomes impossible to see the numbers. Is there a way to fix that?

image

Here is an image of how it currently looks if I set to the dark theme and display a date input.
The idea would be to change this gray background to the same color as the background color of the page.

I can see how the date range selection is a little overpowering in dark mode vs light mode. As a workaround, you can add this to the end of your page. It takes the standard coloring for the range selection and adds 50% opacity to soften the impact.

css = '''
<style>
    .st-h2::before {
        background-color: rgb(230, 234, 241,.5);
    }
</style>
'''
st.markdown(css, unsafe_allow_html=True)

On a side note, it looks like there is a current bug report: Date range selector is hard to see in dark mode ยท Issue #6072 ยท streamlit/streamlit ยท GitHub

1 Like

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