[Updated 2019.08.18] Hemera (Day) and Nyx (Night) themes with support for some custom Lovelace cards

This looks awesome. Well done !

Thanks @royto
I’ve already done that part but then what next?
The theme is installed in HACS and I see it there but I don’t have any themes available in Hass.

Themes are available in your profile page


You must restart to see new theme

I know that. I’ve used themes and developed some before.
This is a fresh install and I haven’t used themes yet. For some reason no themes are available to choose.
Anyway I will figure it out- thanks for taking the time to help with the HACS bit. Much appreciated

Have you updated your themes.yaml with the list of themes? Or are you using some directory listing to include all the themes in the theme directory automatically, like described in https://www.home-assistant.io/docs/configuration/splitting_configuration/#advanced-usage?

Great work by the way.
I’m using a themes directory added to my config as follows:

  - themes: !include_dir_named themes/

This is the first time I install a theme via HACS so I’m not sure how to make Hass aware of it


I have no idea where HACS installs the themes. You should check that, otherwise the !include_dir_named won’t pickup the theme.

And I thought you have to restart hass to have the themes available in your profile.

I have restarted Hass.
I recently set up a new instance and have no themes yet. I was using a themes dir on my old setup and had planned to do the same but I’d like to give your theme a try
How would I go about using it if I don’t use a themes directory?

@royto What do you need to put in your config so that Hass sees the theme after it is installed by HACS?

See HACS FAQ for info about theming

Weird. I am doing all that. I’m getting the following config errors:


@AmoebeLabs @mkhattab

I just installed the theme via HACS as well and saw similar errors. I found that the theme yaml files are missing a name, which I had to add manually. Then, indent all the definitions below the name.

To illustrate, here’s a screenshot of the hemera yaml:

I noticed in @AmoebeLabs config in Github he is using a themes.yaml file which defines the name, then includes the definitions below that. When installing via HACS, the name needs to be defined in the theme yaml file itself. Can this be added to your theme repo’s? Would make management via HACS much easier :slight_smile:


Thanks so much @alterbridge86 this did the trick.
Both themes are now up and running after applying this fix :+1::metal:

@AmoebeLabs Now that I have your awesome themes working, I am trying to get the buttons working like yours. I’ve installed the decluttering card and custom button cards but I’m not sure how to go about setting up the template to control their appearance (e.g. your WOONKAMER buttons. Would you mind sharing the rest of the template you used to achieve that look?

Yes I will change this, to make installtion via HACS as expected: a standalone theme!

I’m not sure if the templates are already in my github config. Will check that tomorrow.

Can you get the Nyx Theme variant #03, Teal/Teal/Teal theme ready for HACS also?


Hey @AmoebeLabs I have finally come around and used your code in my config. I had to make modifications to make it work with my style of themes but it is looking good. So far the changes are mostly only visible in HA’s own interface but it looks nice.

Thanks a lot for sharing your amazing work. Obviously I will reference to you and your work if I upload my current config which will be in the upcoming week. (Might be later as my upcoming update is huge and writing docs take a lot of time)

So another big thank you, and like you said, it is truly a great collaboration.

Hi Guys,

i’m lack of experience with themes, i want to change the background to a specific view, the view below:

code for the view:

  - title: Cellphone View
    icon: mdi:cellphone-iphone
      - type: vertical-stack
          - type: horizontal-stack

i found @jimz011 wallpaper, and i want to use for the above view, wallpaper below:

can someone guide how can i achieve it?

Thanks in advanced !

Pretty much the wrong topic if you want to use my wallpaper :joy::rofl: anyways you can either define it in lovelace or within themes (which is the way both @AmoebeLabs and I use, at least I think he does)

In your themes put the following line:

background-image: 'center / cover no-repeat url("/local/images/original-homekit-wallpaper.png") fixed

Change the image name to the one you use. Also make sure that that specific theme is active!

1 Like

The exact same way, but the put it at the top of your ui-lovelace.yaml before the first view.