Blue/Grey Night theme

Dev Tools -> Services -> frontend.reload_themes ?

OK … went to ‘Dev Tools -> Services -> frontend.reload_themes’ and I didnt type anything in ‘Service Data (YAML, optional)’ just click on button ‘call service’ … but same result as before

What’s in your configuration.yaml,

frontend:
  themes: ???

frontend:
themes: !include_dir_merge_named ./themes

No sure if that ./ at the front will work.
If your themes.yaml is not in that themes folder, HA will not read it.

I have this

frontend:
  themes: !include_dir_merge_named themes

and created a file gauges.yaml (name doesnt matter) in it.

th_gauge_3:
  label-badge-blue: "#55acee"
  label-badge-green: "#9bc53d"
  label-badge-yellow: "#fde74c"
  label-badge-red: "#c3423f"

Save -> frontend.reload_themes

I created in /config/themes/gauge.yaml following:

gauge:
  label-badge-blue: "#55acee"
  label-badge-green: "#9bc53d"
  label-badge-yellow: "#fde74c"
  label-badge-red: "#c3423f"

My /config/configuration.yaml has:
frontend:
themes: !include_dir_merge_named themes

/config/themes.yaml is emty.

Now I can choose theme ‘gauge’ in edit-gauge-card but how do get the new colors.
It looks strange …

entity: sensor.temperature_14
max: 40
min: -5
name: Ute
severity:
  label-badge-blue: 1
  label-badge-green: 5
  label-badge-yellow: 15
  label-badge-red: 25
  green: .nan
  yellow: .nan
  red: .nan
theme: gauge
type: gauge

Where does tis code come from?
Take a look at the docs.

I have a theme that I use already (Dark-Green) where a section have following …

  label-badge-red: "#D06568"
  label-badge-green: "#80C884"
  label-badge-blue: "#5F9BEA"
  label-badge-yellow: "#DFC271"
  label-badge-gray: "#5F6267"

can’t I just that Dark-Green theme?

What I did was to define a Gauge Card and in the code editor added following:

entity: sensor.temperature_14
max: 100
min: 0
name: ute
severity:
  green: 10
  red: 25
  yellow: 15
  blue: 28
theme: Dark-Green
type: gauge

still can’t get the colors right … the visual editor only shows ‘green/yellow/red’

Well, that’s how the core gauge works.
Something to read:

I followed your guidelines … but I missed something

I have a theme ‘Dark-Green’ … where I have defined the colors

  label-badge-red: "#ed6165"
  label-badge-green: "#80C884"
  label-badge-blue: "#aecdf5"
  label-badge-yellow: "#DFC271"
  label-badge-white: "#FFFFFF"

Then I made the hack in ‘gauge-card.js’

Get an error ‘Failed to execute ‘attachShadow’ on ‘Element’: Shadow root cannot be created on a host which already hosts a shadow tree.’
Here is my code for that card:

entity: sensor.temperature_14
theme: Dark-Green
title: xxx
max: 35
min: -20
severity:
  white: -10
  blue: 0
  green: 10
  yellow: 20
  red: 30
type: 'custom:gauge-card'

I tried this, and it isn’t working for me. I don’t have a separate themes.yaml file, but I created one in the themes directory that I made. (/config/themes/themes.yaml).

In /config/themes/themes.yaml, I have the following:

theme_gauge_temperature:
  label-badge-blue: "#0000ff" # Dark Blue
  label-badge-green: "#33ccff" # Light Blue
  label-badge-yellow: "#33cc33" # Green
  label-badge-red: "#ff0000" # Red

In my configuration.yaml file, I have

frontend:
  extra_module_url:
    - /local/community/custom-brand-icons/custom-brand-icons.js
  themes: !include_dir_merge_named themes

I can pull up the theme using the UI. Here is a screenshot of what I get:

Here’s the code:

type: gauge
entity: sensor.front_door_temperature_2
min: 0
max: 100
name: Front Door
theme: theme_gauge_temperature
severity:
  green: 0
  yellow: 68
  red: 73

I have checked my configuration, restarted home assistant, emptied my caches, and restarted my browser many times.

Thanks in advance for your help!

Hi,
I updated the top portion of the BlueNight theme to GreyNight but I am not getting this:

This is what I have:

Notice the difference in sidebar and button colors.