Background color of history graphs

[jkufner]

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

1. 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