Background template reverts back to primary color rather than app-header-background

[SeanPM5]

I have a pretty simple config here that will turn the header red when guest mode is on.

custom_header:
  background: '{% if states.input_boolean.guest_mode.state == "on" %}#ff0000{% endif %}'

However when guest mode off (95% of times) it seems to make the header use --primary-color rather than --app-header-background-color ... So on the default dark theme, rather than having the header be black as it's supposed to be, like this:

Custom Header instead seems to make the header blue (primary color), an incorrect behavior. App-header-background should take priority over primary-color as far as I know.

Hope this made sense? I'm sure I could fix this on my end with a more robust template, but this seems like a possible bug in Custom Header.

Home Assistant version: first noticed in 0.114 (dark theme)
Browser version: Chrome, iOS mobile apps
CH version: 1.7.7

[github-actions]

Important:

Issues that don't provide the necessary information listed below may not get a reply and will be closed until the info is provided.

is the current version of Custom Header. Be sure that you are using the latest version by checking your browser's dev tools console (usually found by pressing F12). If this doesn't display the current version either clear your cache or reinstall.

If you haven't yet done so, please read the "Before Posting an Issue" section of the docs site.

Include as much of the following info as you can to help me replicate and investigate your issue:

• A copy/paste of your Custom Header config (found in "Raw Config Editor" or ui-lovelace.yaml).
  Use the tip at the end of this post to format it correctly.
• Any errors relevant to Custom Header found in the HA logs
• Any relevant errors found in your browsers dev console (F12)
• The version of Home Assistant and Custom Header you are using
• The browsers or apps that are affected (i.e. Firefox, Chrome, Chrome Mobile, iOS HA Companion app, etc.)
• Installation method (HACS or manual)
• Lovelace Mode (YAML or Storage). If you are unsure, you are most likely using Storage.

When pasting in your config always place 3 backticks ``` above the first line of your config and after the last line. Doing this will format it correctly so that I may find any formatting errors in your config.

[maykar]

That's odd as it should use the background set in config, then the ch theme var, then app header, then primary:

custom-header/src/default-config.js

Line 28 in 69182b8

getThemeVar('--ch-background') || getThemeVar('--app-header-background-color') || 'var(--primary-color)',

Will look into it, thanks!

[maykar]

This has been addressed in the latest pre-release 1.7.8. Please, report back here and let me know if it has fixed your issues.

To view pre-releases in HACS go to the Custom Header listing under "Frontend", click the 3 dots in the right hand corner, select "Reinstall", turn on "Show beta versions", select 1.7.8, and hit "Install". Clear cache afterwards just in case.

If you do not see the version 1.7.8 reported in your browser's dev tools console (F12). You may need to reinstall or clear cache. If you installed manually, make sure you're adding to the URL version number in your Lovelace resources.

[SeanPM5]

1.7.8 has indeed fixed this, everything working as expected now. Many thanks!