Themes not displaying what it used to after last update

Configuration Frontend
1

Hi,

I am using the “midnight” theme which can be found here.
Everything was fine, however after the last update my dashboard is showing white background instead of the dark gray color (#434954).

How can I get it to display gray instead of white?

Screenshot 2020-10-08 at 21.18.41
Screenshot 2020-10-08 at 21.18.412150×960 195 KB

midnight:
  accent-color: "#E45E65"
  card-background-color: "var(--primary-background-color)"
  dark-primary-color: "var(--accent-color)"
  disabled-text-color: "#7F848E"
  divider-color: "rgba(0, 0, 0, .12)"
  google-blue-500: "#4285f4"
  google-green-500: "#39E949"
  google-red-500: "#E45E65"
  google-yellow-500: "#f4b400"
  ha-card-background: "#434954"
  label-badge-background-color: "#2E333A"
  label-badge-blue: "#039be5"
  label-badge-border-color: "green"
  label-badge-green: "#0DA035"
  label-badge-grey: "var(--paper-grey-500)"
  label-badge-red: "var(--accent-color)"
  label-badge-text-color: "var(--primary-text-color)"
  label-badge-yellow: "#f4b400"
  light-primary-color: "var(--accent-color)"
  markdown-code-background-color: "var(--paper-listbox-background-color)"
  paper-card-header-color: "var(--accent-color)"
  paper-dialog-background-color: "#434954"
  paper-grey-200: "#414A59"
  paper-grey-50: "var(--primary-text-color)"
  paper-grey-500: "#9e9e9e"
  paper-item-icon_-_color: "green"
  paper-item-icon-active-color: "#F9C536"
  paper-item-icon-color: "var(--primary-text-color)"
  paper-item-selected_-_background-color: "#434954"
  paper-listbox-background-color: "#2E333A"
  paper-listbox-color: "var(--primary-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-disabled-active-color: "var(--disabled-text-color)"
  paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
  paper-slider-knob-color: "var(--accent-color)"
  paper-slider-knob-start-color: "var(--accent-color)"
  paper-slider-pin-color: "var(--accent-color)"
  paper-slider-secondary-color: "var(--secondary-background-color)"
  paper-tabs-selection-bar-color: "green"
  paper-toggle-button-checked-bar-color: "var(--accent-color)"
  paper-toggle-button-checked-button-color: "var(--accent-color)"
  paper-toggle-button-checked-ink-color: "var(--accent-color)"
  paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
  paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
  paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
  primary-background-color: "#383C45"
  primary-color: "#5294E2"
  primary-text-color: "#FFFFFF"
  secondary-background-color: "#383C45"
  secondary-text-color: "#5294E2"
  sidebar-background-color: "var(--paper-listbox-background-color)"
  sidebar-icon-color: "rgba(255, 255, 255, 0.70)"
  sidebar-selected-icon-color: "var(--primary-color)"
  sidebar-selected-text-color: "var(--primary-text-color)"
  sidebar-text-color: "var(--primary-text-color)"
  slider-bar-color: "var(--disabled-text-color)"
  slider-color: "var(--primary-color)"
  slider-secondary-color: "var(--light-primary-color)"
  st-mode-active-background: "var(--dark-primary-color)"
  st-mode-background: "var(--primary-background-color)"
  state-icon-active-color: "#FDD835"
  state-icon-color: "#44739e"
  state-icon-unavailable-color: "var(--disabled-text-color)"
  switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
  switch-unchecked-button-color: "var(--disabled-text-color)"
  switch-unchecked-color: "var(--disabled-text-color)"
  switch-unchecked-track-color: "var(--disabled-text-color)"
  table-row-alternative-background-color: "#3E424B"
  table-row-background-color: "#353840"
  text-primary-color: "var(--primary-text-color)"
  toggle-button-color: "var(--primary-color)"
2

bump. any ideas?

3

a few versions back this var changed to primary-background-color

4

So what is the solution for this? I’m also using midnight theme and have the same problem.

I checked and I do have primary-background color set like this:

primary-background-color: “#383C45”

but still the background is white.

5

clear your cache after making the change

6

I didn’t have to do any change. My midnight.yaml already had this.

This was working in 0.115.0, and the white background started showing up when I upgraded to 0.116.2.

To double check, I logged in using another browser (also in private window mode) and still see the same issue.

7

it’s possible the attribute changed again. I’m not on 0.116 on my home system, only my dev box is greater than 0.115.

just verified it’s --primary-background-color