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

As you can see, when enabling Show colour in compact tab bar in Safari browser the colour follows primary-color instead of the theme colour.

Describe the behavior you expected

It should follow either, primary-background-color or secondary-background-color instead of primary-colour, otherwise this will change the UI text colour as it's linked to primary-colour (for some strange reason?), which will make text unreadable.

Steps to reproduce the issue

1. Enable `Show colour in compact tab bar' in Safari.
2. Navigate to dashboard frontend.
3. See Tab colour not matching theme.
   ...

What version of Home Assistant Core has the issue?

2024.5.2

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

17.5 (19618.2.12.11.4)

Which operating system are you using to run this browser?

Sonoma 14.5 Beta (23F5074a)

State of relevant entities

No response

Problem-relevant frontend configuration

# Main Interface Colors
primary-color: rgb(26, 115, 232)
primary-background-color: rgb(214, 214, 214)
secondary-background-color: rgb(220, 220, 220)
divider-color: var(--primary-background-color)
accent-color: rgb(26, 115, 232)
# Text
primary-text-color: rgb(32, 33, 36)
secondary-text-color: rgb(95, 99, 104)
text-primary-color: var(--primary-text-color)
disabled-text-color: rgba(95, 99, 104, 0.4)

Javascript errors shown in your browser console/inspector

No response

Additional information

No response