Improved Contrast for Hovered Dates in Date Range (issue-10929)

The Issue

This issue can be found at https://github.com/streamlit/streamlit/issues/10929. Is related to the date_input widget in Streamlit, which allows users to select a date range. The bug appears when a date range is preselected, and the user hovers over dates within that range. While the hover state applies a red background for visual feedback, the text remains black, resulting in poor contrast and reduced readability, in the light theme.

Issue in practice

In the light theme, when two dates are selected and the user hovers over a date within the selected range, a styling issue occurs:

• The background turns red on hover
• The text remains black, causing low contrast and making the date hard to read

This issue does not occur in the dark theme, where the text remains readable due to better contrast.

Light theme with poor contrast (before fix)

Dark theme with sufficient contrast (no issue)

Why Does This Issue Matter?

When users hover over dates in the selected range (light theme), the poor contrast between the red background and black text makes the date difficult to read. This bug negatively affects usability and accessibility, particularly for users with visual impairments or color contrast sensitivity

Requirements

This issue occurs in the context of a web-based application built using Streamlit, which is a Python framework for quickly building and deploying interactive web apps, particularly for data science and machine learning workflows.

Feature Context

The st.date_input widget in Streamlit allows users to select single dates or date ranges through a simple and intuitive calendar interface. It is commonly used in apps for tasks such as filtering datasets by date, setting time ranges for analyses, or configuring reports. When a date range is selected, the widget visually highlights the selected start and end dates, along with all dates in between, providing a clear indication of the active range. A smooth and accessible interaction—especially when hovering over selected dates—is essential to ensure users can easily interpret and adjust their selections.

User Story

• As a User, I want to clearly see and read the dates when I hover over a selected date range in the st.date_input widget, so that I can confidently understand and adjust my date selections without confusion or eye strain.

Source Code Files

Only one file was changed in the frontend:

• DateInput.tsx

Design of the Fix

Fix Source Code

The issue exists in the styling of the Day component in the date picker. When a date has both $isHovered and $PseudoSelected states active (indicating it’s being hovered and is within the selected range), the text color needs to change in light theme to ensure readability.

The key part of the fix is the conditional styling that changes the text color to match colors.secondaryBg only when:

1. The theme has a light background (hasLightBackgroundColor(theme))
2. The date is being hovered over ($isHovered)
3. The date is within the selected range ($pseudoSelected)
4. The date is not one of the specifically selected endpoints (!$selected)

Submit The Fix

A pull request has been submitted with the fix:

Pull Request #11223

Update 9/06: PR Merged.