Transparent header

Configuration Frontend
1

Hey!

Anybody got an idea how to make the header transparent using themes?

Test
Test1847×935 155 KB

2

I’m trying to figure it out myself. I’m half way there. Using the following, I can get the header to be transparent, but only after scrolling down a bit. There’s still a black (or other dark color) band behind the header at the top, making it look black until scrolling. I really want it to be transparent the whole time.

app-header-background-color: "rgba(0, 0, 0, 0.4)"

The last number is the transparency value. I’ve tried adding the following line too, but it has no effect.

app-toolbar-background-color: "rgba(0, 0, 0, 0.1)"

Here’s what mine looks like before and after scrolling:
Screenshot 2021-04-16 102011

Screenshot 2021-04-16 102042

I would love it to look like the second image without having to scroll. Anyone have any ideas?

1 Like
3

Looks like there is also an issue raised on github for this.

4

Any idea? Same issue here

5

Since latest update I can’t even get it to be transparent at all

6

Same here. The workaround no longer works and I haven’t found the trick yet…

7

Still no solution for this?

8

HA 2023.4 had a frontend library being replace due to deprecation. In version 2023.3, I used card-mod in themes to set a background image behind the header using CSS tags ha-app-layout and made the app-header transparent. This is not possible anymore, I found a new workaround for 2023.4 to set a background image and transparent header using card-mod:

  card-mod-theme: <name_of_theme>

  card-mod-root: |
    #view {
      background: url('/local/img/background.png');
      background-size: cover;
      margin-top: auto !important;
      height: calc(100vh - env(safe-area-inset-top)) !important;
    }
    .header {
      background: rgba(20,20,20,0.3) !important;
    }

  card-mod-view-yaml: |
    .: |
      hui-view {
        background: none !important;
      }
      hui-masonry-view {
        padding-top: var(--header-height);
      }
9

This workaround is not necessary anymore after HA 2023.5

10

Is it possible to make the header/toolbar permanently transparent and show the background at the moment?

I have set

      app-header-background-color: "rgba(0, 0, 0, 0)"
      app-toolbar-background-color: "rgba(0, 0, 0, 0)"

in my theme but the toolbar/header only becomes transparent on scrolling.
Animation

11

not sure if this is closed but I found a working workaround. It is using a theme but here is the code:

Theme:
    # Home Assistant override
    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
    ha-card-border-width: 0
    app-header-background-color: "transparent"   
    app-header-text-color: "white"
    style: |
        #customSidebar {
            width: 18.5%;
            overflow: hidden;
            margin-top: 0px  !important;
        }
        #view {
            padding-top: 0px !important;
        }
        #tabsContainer {
            display: none;
        }
12

Anyone found a good workaround that works?