Is there a way to use more color for gauge card?


in lovelace gauge car, we have for color (blue if not in the range) and green, yellow, red, for severity config.

i would like to know if there is a way to use other color ?
or, … use one color for two range like from 0 to 40 --> red, from 40 to 60 --> green, from 60 to 100 --> red


1 Like

You can use every color you want with a theme.



i really need to check how we made theme.
i just make the update to lovelace, so i’m in “discovery mode” hahahah


For anyone that comes looking, this changed at some point (apparently without documentation). Here is what works for me now:

  ha-card-background: "rgba(70, 70, 70, 0.1)"
  success-color: '#008ae6'
  warning-color: '#EA8016'
  error-color: '#c3423f'

Were you able to change the main color or just the 3 severity numbers?

The background will change with that first line; I haven’t looked into changing the needle or text colors but you can examine the elements using your browser inspector

Thanks a ton @fmon - I was scratching my head with this until I came upon your post.

Just a minor correction (unsure if it’s changed since you posted this). The main colour, or the one used when severity is disabled, is actually info-color. For example:


Gauge Theme:
  info-color: "#008ae6"
  success-color: '#80C884'
  warning-color: '#EA8016'
  error-color: '#c3423f'