Sidebar Background color Hassio V 108.2

micque · April 10, 2020, 9:17pm

Here are the sidebar colors I set.

  sidebar-background-color: var(--app-header-background-color)
  sidebar-icon-color: var(--state-icon-color)
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-selected-background-color: var(--app-header-background-color)
  sidebar-selected-icon-color: var(--state-icon-active-color)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)

Obviously use your own colors. I have found if you don’t also set the sidebar-selected background color especially if you’re switching between themes the previous color sticks in places even though the rest of the sidebar changes.

gurbina93 · April 10, 2020, 9:36pm

Updated a few hours ago, I have the Chrome app and Ariela installed, no issues with different themes.
Same thing on a different device from which I have never used to access HomeAssistant.
Probably same issue as HACS, for me it kept working normally but other people reported a broken HACS or it’s components not working anymore.

earion · April 11, 2020, 9:27am

Thank you for this fix!

How did you know this?
Why paper-listbox-background-color suddenly broke in v108.2 ?

thatguy_za · April 11, 2020, 9:41am

I also had this “problem” and this fixed it for me… Obviously with my themes colour and not this.

tom_l · April 11, 2020, 10:13am

On 0.107.7 I’m still using paper-listbox-background-color and it works.

anon43302295 · April 11, 2020, 6:38pm

This didn’t work for me…

Any help gratefully received - this is happening on all my themes that aren’t ‘default’ (I use 4 different ones for various things)

tom_l · April 11, 2020, 6:39pm

CTRL + F5 ?

anon43302295 · April 11, 2020, 6:40pm

Yup - no dice.

Edit - should add, this is 108.3 - I think I skipped 108.2, and possibly 108.1 but I can’t remember - was working before I just pressed update though, and now it’s like that and adding the line @blackvrs suggested to my ‘dark’ themes, reloading and clearing the cache didn’t change anything.

Mariusthvdb · April 12, 2020, 8:35pm

is another #metoo here useful?.. just updated to 108.3 because of the DB issue (which seems to be solved )

Introduced the sidebar issue though, on most themes (or so I can notice, because not all themes use a colored sidebar)

so: seeing the same thing …

wait, there’s this: https://github.com/home-assistant/frontend/issues/5524

sidebar-background-color: "var(--paper-listbox-background-color)"

should fix it?

anon43302295 · April 13, 2020, 6:52pm

Confirm, that worked - no idea why declaring it as an actual colour didn’t, but hey-ho

Mariusthvdb · April 13, 2020, 8:59pm

yes, as long as it works

now have to find the correct variable name for the dropdown background in the services page, which suffers the same here

JazekerXX · April 14, 2020, 11:06pm

this fixed it for me, but it did require a HA restart!

Mariusthvdb · April 15, 2020, 7:11am

no, that’s not necessary, a simple frontend.reload_themes suffices:

JazekerXX · April 17, 2020, 9:49pm

learned something new. thanks!

kirpat · April 18, 2020, 1:57pm

theres a same proble when we go in cofigure/entiites or configure/devices.
custom themes show white color as side-bar was showing.
please anybody here who can guide.
thanks in adv.

tom_l · April 18, 2020, 7:10pm

Different problem. Add this to your theme:

card-background-color: "var(--paper-card-background-color)"

Mariusthvdb · April 18, 2020, 8:53pm

Hi Tom,
would you know how to solve this too: Sidebar Background color Hassio V 108.2

  card-background-color: 'var(--paper-card-background-color)'

~~doesnt do it in this case, your reply wasn’t meant for me was it?</strike?~~

never mind it does! was too quick, and cache hadn’t reloaded I think… I can see all nice now.
Thanks!

marian.zlamal · April 21, 2020, 3:37pm

bumping this comment as I have the same problem
I’m trying to find the correct css code at the moment, will let you know if I have any luck.

Found your last comment with solution, nevermind
card-background-color was the way

Winni · May 2, 2020, 11:01am

Thanks a lot for this. This also fixed the same issue for me. Any hint on how you found the correct variable? I am still having a hard time identifying the names of the variables for my theme. The Google DevTools inspect-feature doesn’t really help. In this example, the “card-background-color” isn’t referenenced anywhere in the dropdown menu or the related html elements.

TommyG · July 16, 2020, 1:27pm

Just a quick note to say this fixed my issue with the sidebar and topbar staying white when it should’ve been dark blue.

Thanks Tom!