hi i trying to figure out what i need to fix to fix the top bar from white back to the blue
it was blue to prior 2026.2 update but after i update my different ha’s the bar goes blue to white… and the top bar text goes from white to gray
i did try google and tried the log out and log back in. toggle the advanced mode… clear the cache… none of that is working…
is there something else i missing?
yes this was changed on purpose
see also @ 2026.2: Home, sweet overview
i see… they did it for a clean look… they should have had a toggle switch
for this so you can turn it on or off… cuz now its distracting and causing issues when i got like 20 tabs and now i got a white tab and a dashboard colorful theme for dashboard… before i had a blue tab and a dashboard colorful theme
not sure the reasoning cuz it just looks terrible
is there a code editor to fix it back to blue?
In the thread linked above, someone has posted a way to restore the blue bar via theme.
I have noticed an issue with the new “modern look”. It is supposed to match the Settings page but on my instance the icons on the top bar do not use the highlight colour when selected as they do in the Settings page. I have cleared the browser’s cache.
so i see how that guy did it search didnt work so had to scroll it
so i made it work but you cant make a default yaml… was hoping theme.yaml or themes.yaml would defaulted
so what i did was i had to get the HEX code for the default color top bar googled a convert
then made a file
classic-header-color.yaml
classic-header-color:
#app-header-background-color: "#009AC7"
app-header-background-color: var(--primary-color)
app-header-text-color: "#FFFFFF"
and then for the user i on you gotta click the user name and then scroll to Themes and then choose file header-color.
that seems to do it… just wish it was just able to over ride by default… if you wanna make it that there should be like a toggle switch that over writes
like a modern/classic mode toggle switch
i appreciate the help @Saoshen cuz i had my sister bitching at me what is going on her bar changed color… i can now fix her setup
ill have to tell her to update the themes drop down under her user name
Yeah, it sucks! It’s absolutely horrible. This should be a user option and not be forced like this.
If there is a CSS variable which can be used in a custom theme → this is a user option.
There are plenty of CSS vars which can be used in custom themes, and some of these variables MAY be outdated/replaced one day - no way there would be dedicated switches for them (not to mention that “modern/classic mode toggle switch”).
ANY custom theme is using default CSS variables - if they are not explicitly re-defined in a custom theme.
Additional info for users who is less experienced with themes:
– how to create a theme (originally about using card-mod in themes) - one, two
– how to create a dark/light theme - here
– how to re-define CSS vars w/o using a custom theme - here
well i use custom themes for the tabs not the header but sure why not a toggle switch
not hard since one the programmers didnt delete “default” as a theme
so if “Default” theme is set then toggle switch
Blue(or whateever u set as default) + Orange Asspect Or Modern Black & White
so the Toggle Switch is Default or Modern if set to “Default” as the theme is what i mean about a switch
just like an automation Condition… this way you can switch back and forth from the default setting
right now i dont make custom themes i just use the
ios-dark themes for the backgrounds and blue bar for the top…
but all i was saying was there should be a toggle switch so when you log in first time it defaults Classic Blue(Default) or Modern White on Default Theme
ill check out the css stuff but i dont make any of them just use the ios- dark ones
its like microsoft between ver u get used to one way you like it then break it for the next lol… but its all good least its back to what i need for now i dont have a yelling sister at me telling me wtf lol
@Ildar_Gabdullin i have question is there a transparent css so the tabs at the top are on the background but u dont see the bar so just a transparant backing… is there a such css or possible to make that?
see also @ Putting back the blue header in 2026.2
@Saoshen Thanx, sorry i did search but did not find this related thread. to reduce the other post I copy it here and delete my original:
I just updated to the new 2026.2 and see that the old (Trade mark) blue header has been removed. For those that want to put it back as a custom theme please follow these steps (Thank you Claude Code!):
/config/)themes if it doesn’t existthemes folder, create a file called classic_blue.yamlclassic_blue:
# Header colors only - using the original HA blue
app-header-background-color: "#03a9f4"
app-header-text-color: "#ffffff"
Add this to your configuration.yaml:
frontend:
themes: !include_dir_merge_named themes
@Saoshen ya thats what i did there
@Ildar_Gabdullin from what i read didnt help but i figured it out
app-header-background-color: none
this makes the top bar transparent
i took it from one of my cards that uses card_mod for some clocks i have.
so i took a chance maybe it would work…
least that works for me and the other for my sister… so i dont need her yelling at me what did i do to her HA lol
Isn’t it same was suggested here? ))
not sure what you mean
My reply was not addressed to you.
What I said to other person that detailed sequence “how to create a theme” was posted above, check 1st link in my post.
oh sorry about that
i have an issue with this new change as now I have white icons on white background:
Tried to delete browser cache, no change.
The theme is “use default theme”.
I don’t remember I made any change to icon color, so should be the default.
If i switch to the dark theme i have correctly grey icons on black background.
it’s only me or someone else has the same issue. Do you know how I can fix this?
thanks
Do you have any user-defined js-files to customize theme CSS variables?
Also, try purging a browser cache.
Users only can do it by a custom theme (with or w/o card-mod-theme).