Add css var for meta theme-color attribute

[Nicooow]

Proposed change

Previously, it wasn't possible to specifically change the color of the "theme-color" meta tag, which is used on some browsers to color the top bar, or on mobile devices.

<meta name="theme-color" content="#4285f4" />

The only way was to modify app-header-background-color, which also modified the bar at the top of the page, rendering an ugly result.
In addition, the tag was correctly updated in light mode, but in dark mode it reverted to blue, regardless of the primary-color, which was also ugly.

I added app-theme-color to specifically modify this tag, and it inherits primary-color by default to keep the same behavior as before, fixing forced blue in dark mode.

Before, with red primary color :

After:

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

frontend:
  themes:
    dev:
      modes:
        light:
          primary-color: "#D23232"
          accent-color: orange
        dark:
          app-header-background-color: "#ff0000"
          app-theme-color: "#00ff00"
          primary-color: "#D23232"
          accent-color: orange

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

Stale

[TheJulianJES]

This seems to have caused a regression on Chrome PWAs when using the dark theme:

previous, correct behavior:

new behavior (2024.5.0b0):

[Nicooow]

This seems to have caused a regression on Chrome PWAs when using the dark theme:

previous, correct behavior:

new behavior (2024.5.0b0):

Can you please screen the previous behavior in light mode please ?

Perhaps we could default dark themes to the same “darker” color as the bar below.

[TheJulianJES]

Can you please screen the previous behavior in light mode please ?

It's the same color for the title bar and the "HA bar", as expected. That behavior is unchanged.

Only the dark theme behavior is "broken" now. Also seen when just opening the mobile page on iOS with a dark theme -- the status bar becomes light blue (instead of having the same color as the HA bar like before).

[Nicooow]

Can you please screen the previous behavior in light mode please ?

It's the same color for the title bar and the "HA bar", as expected. That behavior is unchanged.

Only the dark theme behavior is "broken" now. Also seen when just opening the mobile page on iOS with a dark theme -- the status bar becomes light blue (instead of having the same color as the HA bar like before).

Should be fixed : #20671