allow gradient on app-header-background-color in themes

[Mariusthvdb]

we can set a gradient Lovelace background in our themes with:

    lovelace-background: radial-gradient(var(--primary-color),var(--card-background-color))

and we can set a gradient to a card-background, with:

    ha-card-background: linear-gradient(180deg, var(--primary-color) 0%, var(--card-background-color) 100%)

we can set a gradient to the app-header-background-color using card-mod-theme:

    card-mod-root-yaml: |

      .: |
        /* Set the toolbar background. */
        app-header, app-toolbar {
          background: radial-gradient(var(--primary-color),var(--card-background-color));
          color: var(--text-primary-color);
        }

however, we can not set a gradient in a theme directly. Where:

app-header-background-color: var(--primary-background-color)

works fine, the gradient:

app-header-background-color:  radial-gradient(var(--primary-color),var(--card-background-color))

doesnt.

It would be really nice to be able to set a gradient in the themes directly because:
-a this wouldn't need a custom solution
-b it would make it very easy to do so differently for different themes.

Long story short:

Please enable/allow gradients on the app-header-background-color variable

Edit: and please also on the sidebar-background-color and sidebar-menu-button-background-color

frontend/src/resources/styles.ts

Line 64 in d392695

background-color: var(--app-header-background-color);