Frontend: Themes in HassIO no longer work

[DeviousPenguin]

Home Assistant release with the issue:

Home Assistant
0.91.3

Last working Home Assistant release (if known):
Home Assistant
0.91.3
UI (States or Lovelace UI?):

states
Browser and Operating System:

Firefox v66
MacOs 10.13.6
Description of problem:

The HassOS tab in HA no longer works with any theme. It just seems to use the default theme even though I have a custom theme set. I'm running the latest HassOS supervisor, 158, but it auto updates but I seem to remember supervisor 150 used to work with the dark theme I have set.

Here's a screenshot:

Themes:
Using midnight dark, here's the yaml

Midnight:
  # Main colors
  primary-color: '#5294E2'                                                        # Header
  accent-color: '#E45E65'                                                         # Accent color
  dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks
  light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about
  # Text colors
  primary-text-color: '#FFFFFF'                                                   # Primary text colour, here is referencing dark-primary-color
  text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
  secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
  disabled-text-color: '#7F848E'                                                  # Disabled text colour
  label-badge-border-color: 'green'                                               # Label badge border, just a reference value
  # Background colors
  primary-background-color: '#383C45'                                             # Settings background
  secondary-background-color: '#383C45'                                           # Main card UI background
  divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider
  # Table rows
  table-row-background-color: '#353840'                                           # Table row
  table-row-alternative-background-color: '#3E424B'                               # Table row alternative
  # Nav Menu
  paper-listbox-color: 'var(--primary-color)'                                     # Navigation menu selection hoover
  paper-listbox-background-color: '#2E333A'                                       # Navigation menu background
  paper-grey-50: 'var(--primary-text-color)'
  paper-grey-200: '#414A59'                                                       # Navigation menu selection
  # Paper card
  paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
  paper-card-background-color: '#434954'                                          # Card background colour
  paper-dialog-background-color: '#434954'                                        # Card dialog background colour
  paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
  paper-item-icon-active-color: '#F9C536'                                         # Icon color active
  paper-item-icon_-_color: 'green'
  paper-item-selected_-_background-color: '#434954'                               # Popup item select
  paper-tabs-selection-bar-color: 'green'
  # Labels
  label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
  label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
  label-badge-background-color: '#2E333A'                                         # Same, but can also be set to transparent here
  # Switches
  paper-toggle-button-checked-button-color: 'var(--accent-color)'
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  paper-toggle-button-checked-ink-color: 'var(--accent-color)'
  paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
  # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-knob-start-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--accent-color)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
  # Sidebar
  sidebar-selected-icon-color: 'var(--secondary-text-color)'
  sidebar-icon-color: 'var(--primary-text-color)'
  # Google colors
  google-red-500: '#E45E65'
  google-green-500: '#39E949'

Javascript errors shown in the web inspector (if applicable):

Additional information:

[SeanPM5]

I have same setup as yours and am able to confirm this issue in Firefox. Hassio panel shows as white in Firefox 66.0.3, macOS 10.13.6, HassOS 2.11 w/ Supervisor 158.

Also reproduced the same issue in default Safari browser Version 12.1 (13607.1.40.1.5). Friend is on latest macOS Mojave and latest Safari 12.1 (14607.1.40.1.4) and he reproduced it there too.

It works fine in Google Chrome (73.0.3683.103) though.

[DeviousPenguin]

It works fine in Google Chrome (73.0.3683.103) though.

How odd, I've also tried it in the same version of Firefox (v66) in Windows 7 Pro (with all avaliable updates) and also get the same issue with themes, so it doesn't seem OS related.

Looking at the themes thread on the HA forum post 169 also has the same issue, but they didn't state OS or browser: https://community.home-assistant.io/t/share-your-themes/22018/175

[earth08]

I am having same problem,
I am having this problem in Firefox, homeassistant companion app on iOS and also on safari too and also on chrome.

[jazzyisj]

Just in case it helps diagnose the issue... no issues here.

Hassio 0.91.3
HassOS 2.11
Windows 10, Chrome Version 73.0.3683.103 (Official Build) (64-bit)
Android 9, Chrome Version 73.0.3683.90

[papperone]

+1
issue is occurring only in Firefox and not in any other browser tested (Chrome Win10, Edge Win10, Chrome Android)

[tomlut]

The issue is also occurring in v1.5.0 of the iOS app.

[DeviousPenguin]

I am having this problem in Firefox, homeassistant companion app on iOS and also on safari too and also on chrome.

@earth08: Can I ask what version of Chrome you are running? It seems strange that others aren't seeing this issue on Chrome but you are. There should be a menu item called 'About Chrome' that will show the version. Something like this but with Chrome info instead of Firefox:

@jazzyisj Thanks for the info, can I ask what version of HassIO supervisor you are on also?

[earth08]

@de

I am having this problem in Firefox, homeassistant companion app on iOS and also on safari too and also on chrome.

@earth08: Can I ask what version of Chrome you are running? It seems strange that others aren't seeing this issue on Chrome but you are. There should be a menu item called 'About Chrome' that will show the version. Something like this but with Chrome info instead of Firefox:

@jazzyisj Thanks for the info, can I ask what version of HassIO supervisor you are on also?

Sorry I is working in chrome,
i later found it to be working but forget to update it here.
sorry once again

[DeviousPenguin]

i later found it to be working but forget to update it here.

No problem, nice to know it's working :)

[talondnb]

Any progress on this?

[tomlut]

Still an issue for me. Themes work everywhere except the Hassio menu pages on FireFox and iOS app. Chrome however is ok.

[DeviousPenguin]

Still an issue for me in Firefox and Safari also. Polymer is developed by Google so it makes sense that it works best under Chrome, but it is odd that themeing for HassIO used to work under FireFox but now it doesn't.

[DeviousPenguin]

This issue seems to have resolved itself today, I've updated to HA 0.93.1, and it seems that themes for hassio are now working again.

Now using FireFox 66.0.5 under MacOS, I haven't tested on Windows (yet) but so far so good. :)

Is anyone else still experiencing this issue under HA 0.93.1? If they are I can leave the issue open, but if it's resolved I can close it.

[SeanPM5]

Thanks for the heads up. Just checked and it's working for me now too on both Safari and Firefox, so I would say this issue has been fixed.

[DeviousPenguin]

Thanks, I've tested on a Windows machine also and it's also working, I'll close this issue.

It does seem there has been some front end changes recently:
https://github.com/home-assistant/home-assistant/pull/23618

Weather it fixed this issue or not I have no idea, huge thanks to the devs who fixed this. :)

[jazzyisj]

@DeviousPenguin My apologies for no reply, haven't been on git in a long while due to stuff so didn't see your question. Glad your issue was resolved.