Changing the header background colour

Configuration Frontend
1

Right, this is driving me nuts.
I am using Caule’s theme pack 1.3 to make a custom UI for my wall mounted tablet. I’ve set it as the theme for the dashboard and it all works fine. Apart from the header, which still shows as the default bright blue.
I’ve tried amending the section of the theme I’m using to change the header colour but it doesn’t affect anything, no matter where or what I try to put in.
Can someone assist? How do I change the header background colour?

1 Like
2

As in the HA profile‘s theme editor I would think it‘s the primary color you have to change.

3

I would have thought the same, however it doesn’t do anything when I change it.
I’m using the Caule Dark Green theme on each of the tabs in the dashboard. Changing the primary-color in the Caule Dark Green section of caule-themes-pack-1.yaml has no effect.

4

I don‘t use it, so I can only suggest to replace each entry in the theme files or change the primary color in HA. But I‘ve seen a Caule discussion here. Maybe you repeat your question there.

5

If you mean the global header (e.g. where the view tabs are shown in a dashboard), you can change them via a theme:

app_header_theme:
  app-header-background-color: "green"   
  app-header-text-color: "orange"

grafik

2 Likes
6

Ok, but as I said I’m already using a theme. Can you combine them?
Also, I only want to change it within a single dashboard, not on the whole site.
And, yes, that is the header I want to change.

7

Every theme is just a definition in YAML so you can add or change keys there. Once you did that use the service frontend.reload_themes to load in the changes.

I am not aware of a HA option to assign a theme to a specific dashboard only. You can assign them to individual views within a dashboard.

8

I’ve already tried adding the app-header-background-color value to the Cause theme but it doesn’t do anything. I’m applying the theme to the view in the dashboard and reloading it each time.
Does applying a theme to a view let you change the global header or can that only be changed globally?

9

I have now solved this problem and the solution did not involve any code at all. I just changed the header in the User Profile page. There is a Primary Colour selector there which I set to the colour I needed. I’ve been using HA for over 3 years and I didn’t even know that function was there. In fact, I didn’t even know there was a User Profile page, nor how to access it, until I happened to click on my icon to see what it did.

4 Likes