Background color of history graphs #25587
Description
Checklist
- I have updated to the latest available Home Assistant version.
- I have cleared the cache of my browser.
- I have tried a different browser to see if it is related to my browser.
- I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.
Describe the issue you are experiencing
The contrast in history graphs for events is poor, especially in dark theme:
It would be much better if the background of the graph would be closer to the page/card background.
If I change the inactive color from --state-inactive-color: var(--grey-color); to --state-inactive-color: var(--secondary-background-color);, then the graph looks much better:
Also, it is still good when using the light theme:
However, simply changing --state-inactive-color will also affect icons on dashboards and other things, so it is not a good fix. I guess the graphs need an additional variable or use a different variable. Also, the light theme contrast is still pretty bad (both before and after the change), so maybe a darker yellow should be used there.
Describe the behavior you expected
The graphs should use more readable colors.
Steps to reproduce the issue
- Open any history graph with event/binary state entities (e.g., occupancy or door sensors).
What version of Home Assistant Core has the issue?
2025.5.3
What was the last working version of Home Assistant Core?
No response
In which browser are you experiencing the issue?
It is not browser-specific. Reproduced in Chromium 134.0.6998.35 and mobile Firefox.
Which operating system are you using to run this browser?
Linux, Android
State of relevant entities
Problem-relevant frontend configuration
Javascript errors shown in your browser console/inspector
Additional information
No response