Blue/Grey Night theme

[matejdro (Matej Drobnič)]

Thanks, Unused Entities looks great now!

[LeadUr]

Anyone having issues with the GrayNight theme?

I’ve just upgraded HA to 0.108.6 and the sidebar’s background stays white.

[FunkyBoT]

You will find the solution here.

[Snailboy]

I love the theme! But are the sliders suppose to have this color?
Looks a little bit off. Got the same in both blue and grey.

[fra (francesco)]

hi! someone could help me on how to change only the background color of “number notification”?’

thanks a lot

[finity]

It’s the “accent-color:” setting in the theme.

[fra (francesco)]

thanks a lot! man!

[rajan (Raivo Kask)]

I followed your guidlines and created in /config/themes.yaml

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

Then I define ‘theme: th_gauge_3’ in the gauge config

entity: sensor.temperature_14
max: 40
min: -5
name: Ute
severity:
  green: 0
  red: 25
  yellow: 15
theme: th_gauge_3
type: gauge

but it doesn’t show the ‘th_gauge_3’ when I choose theme for the gauge … wher have I missed?

[VDRainer]

Dev Tools -> Services -> frontend.reload_themes ?

[rajan (Raivo Kask)]

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

[VDRainer]

What’s in your configuration.yaml,

frontend:
  themes: ???

[rajan (Raivo Kask)]

frontend:
themes: !include_dir_merge_named ./themes

[VDRainer]

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

[rajan (Raivo Kask)]

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

[VDRainer]

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

[rajan (Raivo Kask)]

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’

[VDRainer]

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

Change colors for gauge card?

The gauge card severity has only green, yellow and red. Every value lower than defined will be blue. BTW: Your links above show the same topic.

More intervals in Gauge

Only with the Custom gauge-card and a hack in the js file. Works very well and IMO looks better (smooth changes, value and name align) than the core gauge. No guarantee how long because Lovelace is constantly changing. The only issue, the gauge will not auto scale.

[rajan (Raivo Kask)]

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'

[hafa_163]

@kethoth

the theme I posted today.

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!

[backslashv]

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.