Date Input on Dark Theme

🎈 Using Streamlit
1

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.

2

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