Blue/Grey Night theme

Share your Projects! Themes
30

Do you have themes enabled? It’s disabled by default.

31

The issue with this theme and the Unused Entities page (and the Configuration > Devices page) can be fixed by adding card-background-color: 'var(--primary-background-color)' as a new line at the end of the YAML file (make sure to include leading spaces so it matches the previous line).

2 Likes
32

Thanks! I have updated the theme in the TS. Not the one for HACS yet, since I don’t know how to push my changes with this review system…

33

Thanks, Unused Entities looks great now!

34

Anyone having issues with the GrayNight theme?

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

35

You will find the solution here.

1 Like
36

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.

sliders

37

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

thanks a lot

38

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

39

thanks a lot! man!

1 Like
40

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?

41

Dev Tools -> Services -> frontend.reload_themes ?

42

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

43

What’s in your configuration.yaml,

frontend:
  themes: ???
44

frontend:
themes: !include_dir_merge_named ./themes

45

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

46

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
47

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

48

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’

49

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