Home Assistant Community

Not all colours change when applying a theme

#1

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?

0 Likes

#2

Same issue here.

0 Likes

#3

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?

0 Likes

#4

Oh I am sure it is something stupid like that. :wink:
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).

0 Likes

#5

Did you select it afterwards in your profile?

1 Like

#6

See I knew it was something dumb like that :grin:
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?

0 Likes