Blue/Grey Night theme

Share your Projects! Themes
13

Since a few version the gauge has the theme option.
Create a theme in your themes.yaml

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

and define it in the gauge config.

theme: th_gauge_3

So you can use every color for the gauges.

3 Likes
14

Hi,
this is my favorite theme.
But in Logbook and History the date field is “hidden” because too dark.
How can i fix this problem?
image

Thank you.

1 Like
15

I think it cannot be changed… I can’t find a variable that changes this.

16

Below are the css attributes I modified to attempt resolving that with my dark theme. Some modifications I still need to make are lumo-shade (or lumo-shady can’t inspect at the moment) and the percentage versions of it. It’s not perfect yet but it’s an improvement.

image

  lumo-primary-text-color: '#00b706'
  lumo-body-text-color: '#FFFFFF'
  lumo-primary-color: '#00b706'
  lumo-primary-color-50pct: 'rgba(0, 183, 6, .5)'
  lumo-primary-color-10pct: 'rgba(0, 183, 6, .1)'
2 Likes
17

Interested. Resource from https://github.com/vaadin/vaadin-lumo-styles ? Can this be used if not? Also, the text issue work around I have used is here: Darkest-Nightz Theme , but would love to tweak with the vaadin-lumo-styles… Any insight would be greatly appreciated, thanks!

blk1
blk11337×752 46.4 KB
blk2
blk21341×766 41.3 KB

18

Yeah the lumo styles were what needed to be modified, I just didn’t have time to dig into what did what until today. I managed to fix the calendar and entity drop-down menus in the theme I posted today.

1 Like
19

Thanks all. I have updated the theme.

20

I like a lot this black theme. Thanks!!!

The only think that I would change are some badgets that appear like this:

imagen
imagen1080×1006 120 KB

however some other badgets appear nicer, like this:

imagen

Do you know how can I change the first one to the blue circle?

Best regards

21

Is there a way to get the garage door to turn yellow when it is in the open state?

Capture
Capture415×522 6.05 KB

entities:
  - entity: cover.garage_door
show_icon: true
show_name: true
show_state: true
type: glance
theme: Backend-selected
22

When you use the alarm panel, the default lovelace skin has a red badge on the top right corner to show the alarm is active (screenshot 1). Is there a way to have the same badge show up here? Currently it just comes empty (or maybe black and it is matching with the background?) and you can’t tell when the alarm is armed.
Edit- I’m pretty confident the badge turns black and blends into the background.

Default Lovelace skin badge
Capture3

This Skin

Capture2
Capture2505×526 9.85 KB

As an FYI- when the alarm is not armed, it correctly shows the green badge

Capture
Capture493×512 11.4 KB

Thanks for your help.

23

New Unused entities page looks weird with the skin:

image
image1298×503 27.2 KB

Also, disabled buttons are barely visible, for example on the Z-wave config page:

image
image1117×233 7.08 KB

1 Like
24

I do not think this part is themable yet! Waiting for future update.

25

Updated the first post to fix this.

26

Both themes are now included in HACS!

Feel free to check it out at GitHub:

27

They are not listed in HACS for me. None of the themes are by the way. How to add them?

28

Is your HACS plugin up to date?

29

yes, do I need to add a custom repository?

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…