Sidebar Background color Hassio V 108.2

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)"

This might help:

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 :slight_smile:

Did I find a bug under v108.2?

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

use this in your theme

sidebar-background-color: ā€œ#0078a7ā€

2 Likes

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.

1 Like

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.

Thank you for this fix!

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

I also had this ā€œproblemā€ and this fixed it for meā€¦ Obviously with my themes colour and not this.

On 0.107.7 Iā€™m still using paper-listbox-background-color and it works.

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)

CTRL + F5 ?

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.

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?

3 Likes

Confirm, that worked - no idea why declaring it as an actual colour didnā€™t, but hey-ho :slight_smile:

yes, as long as it works :wink:

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

1 Like

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

no, thatā€™s not necessary, a simple frontend.reload_themes suffices:

2 Likes

learned something new. thanks!

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.