Sidebar Background color Hassio V 108.2

cdikland · April 10, 2020, 5:06pm

I just upgraded to hassio v108,2 and regardless which of my many frontend themes I chose, my sidebar background color is always white. Given that most of my themes I use have a dark background with light text color, it has now become impossible to see any of the options on the side bar. I have search all over for what attribute I need to specify within any of my themes that applies specifically to the sidebar back/frontground color but cant seem to find anything that works. The default theme I use is below. What do I need to change or add so I can once again see the options on the side bar??


    darkcyan:
      # Main colors that can be changed
      primary-color: "#008cb4"
      disabled-text-color: "#545454"
      divider-color: "rgba(255, 255, 255, 0.12)"
      paper-card-background-color: "#303030"
      paper-grey-200: "#191919"
      paper-item-icon-color: "#d3d3d3"
      paper-listbox-background-color: "#0078a7"
      paper-listbox-color: "#FFFFFF"                  
      primary-background-color: "#101010"
      primary-text-color: "#efefef"                  
      secondary-background-color: "#004d65"
      secondary-text-color: "#04a7bc"
      # Colors based on variables, see above
      label-badge-background-color: "var(--secondary-background-color)"
      label-badge-text-color: "var(--text-primary-color)"
      paper-card-header-color: "#var(--paper-item-icon-color)"
      paper-grey-50: "var(--primary-text-color)"
      paper-item-icon-active-color: "var(--primary-color)"
      paper-item-icon_-_color: "var(--primary-text-color)"
      paper-slider-active-color: "var(--primary-color)"
      paper-slider-knob-color: "var(--primary-color)"
      paper-slider-knob-start-color: "var(--primary-color)"
      paper-slider-pin-color: "var(--primary-color)"
      paper-slider-secondary-color: "var(--light-primary-color)"             
      paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
      paper-toggle-button-checked-button-color: "var(--primary-color)"
      paper-toggle-button-checked-bar-color: "var(--light-primary-color)"
      paper-toggle-button-unchecked-bar-color: "var(--primary-text-color)"

tom_l · April 10, 2020, 5:37pm

This might help:

cdikland · April 10, 2020, 6:06pm

I tried the above example you linked both under hassio and hassbian v108.2 and had the same results. All the colors changed except the sidebar which remained white.

I booted up my backup hassio v108.1 and the tried these themes. Worked like a charm albeit one ugly looking theme

Did I find a bug under v108.2?

tom_l · April 10, 2020, 6:20pm

If it still does not change colour after you clear you browser cache, then yeah sounds like it.

blackvrs · April 10, 2020, 7:47pm

use this in your theme

sidebar-background-color: “#0078a7”

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.