Not all colours change when applying a theme

[messismore]

Hi!

I am trying to install @naofireblade’s excellent Clear Theme but only few colours are being changed:

This is my configuration.yaml entry:

frontend:
  themes: !include themes.yaml

and this is my themes.yaml:

clear:
  # Colors
  text-color: "#636B75" # Grey text
  text-medium-color: "#8c96a5" # Medium grey text
  text-light-color: "#BAC0C6" # Light grey text
  accent-color: "#00a1ff" # Blue
  background-color: "#F7F8F9" # Light grey background
  background-color-2: "#F4F5F6" # Light grey background
  background-card-color: "rgba(255,255,255,1.0)" # White background
  border-color: "#EAEAEA" # Light grey border
  icon-color: "#ffd400" # Yellow

  # Header
  primary-color: "var(--text-color)" # Background
  text-primary-color: "#FFF" # Text

  # Left Menu
  paper-listbox-background-color: "var(--background-color)" # Background

  # UI
  paper-card-header-color: "var(--text-color)" # Title in settings
  primary-background-color: "var(--background-color)" # Background (also title background in left menu)

  # Card
  paper-card-background-color: "var(--background-card-color)" # Background
  dark-primary-color: "var(--text-color)"
  primary-text-color: "var(--text-color)"
  paper-listbox-color: "var(--text-color)"
  light-primary-color: "var(--text-light-color)"
  secondary-text-color: "var(--text-medium-color)"
  disabled-text-color: "var(--text-light-color)"
  paper-dialog-button-color: "var(--text-color)"
  secondary-background-color: "var(--background-color-2)" # Background more info title

  # Icons
  paper-item-icon-color: "var(--text-light-color)" # Off
  paper-item-icon-active-color: "var(--icon-color)" # On

  # Switches
  paper-toggle-button-checked-button-color: "#FFF" # Knob On
  paper-toggle-button-checked-bar-color: "#0077FF" # Background On
  paper-toggle-button-unchecked-button-color: "#FFF" # Knob Off
  paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)" # Background Off

  # Shadows
  shadow-elevation-2dp_-_box-shadow: "inset 0px 0px 0px 1px var(--border-color)"
  shadow-elevation-4dp_-_box-shadow: "var(--shadow-elevation-2dp_-_box-shadow)"
  shadow-elevation-6dp_-_box-shadow: "var(--shadow-elevation-2dp_-_box-shadow)"
  shadow-elevation-8dp_-_box-shadow: "var(--shadow-elevation-2dp_-_box-shadow)"
  shadow-elevation-10dp_-_box-shadow: "var(--shadow-elevation-2dp_-_box-shadow)"
  shadow-elevation-12dp_-_box-shadow: "var(--shadow-elevation-2dp_-_box-shadow)"
  shadow-elevation-14dp_-_box-shadow: "var(--shadow-elevation-2dp_-_box-shadow)"
  shadow-elevation-16dp_-_box-shadow: "0px 0px 0px 3px var(--light-color)"

I have no idea what’s going on. Any ideas?

[thebradleysanders (Brad Sanders)]

Same issue here.

[CM000n (Simon)]

Maybe a stupid question, but did you choose the theme in the frontend of your Homeassistant user?
Maybe even try to clear the browser cache?

[messismore]

Oh I am sure it is something stupid like that.
I use Lovelace’s YAML mode so I assume other than in the ui-lovelace.yaml I don’t have to set it?
I restarted HA, cleared my cache, and tried multiple browsers (and a few colours do change, just not all of them).

[CM000n (Simon)]

Did you select it afterwards in your profile?

[messismore]

See I knew it was something dumb like that
I was on ‘backend-selected’ and since some stuff did change, I never bothered to manually select the theme. Thanks!

Kinda confusing though, is this a bug?

[Brian_Paur]

Welp, came here looking for a solution to my sidebar not changing color. I had not idea you had to change it under profile. Literally been googling/messing with my theme.yaml for like two days pulling my hair out… So happy I found your post lol

[b3ng3]

I also got the problem, but I changed it in my user account, sidebar worked, background worked an one or two cards worked, but al the other cards are still dark.

[rousveiga (Rosa)]

Yeah, it seems weird to me as well. Especially considering that profile settings seem to be stored in the client, so you have to set your theme in all the devices you want to access HA with, and for both the local and remote URL.

[homerun]

All my cards are coming with the same default dark color despite whatever color I am trying in the theme.

I am trying:

    paper-card-background-color: 'rgba(96, 208, 187, 0.56)'

I also tried it without transparency and the hexadecimal equivalent etc. Also single quote vs double quote also not seem to be helping.