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

devastator · September 13, 2019, 7:47am

This looks awesome. Well done !

mkhattab · September 13, 2019, 8:19am

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.

royto · September 13, 2019, 8:35am

Themes are available in your profile page

You must restart to see new theme

mkhattab · September 13, 2019, 8:36am

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

AmoebeLabs · September 13, 2019, 10:39am

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?

mkhattab · September 13, 2019, 12:43pm

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

frontend:
  - 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

AmoebeLabs · September 13, 2019, 12:46pm

Thanks!

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.

mkhattab · September 13, 2019, 12:48pm

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?

mkhattab · September 13, 2019, 12:53pm

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

royto · September 13, 2019, 12:55pm

See HACS FAQ for info about theming

The first file under the themes directory._

The files are downloaded to <config_dir>/themes/*

For this to work you need to include the themes directory like this:
frontend:
  themes: !include_dir_merge_named themes

mkhattab · September 13, 2019, 1:29pm

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

alterbridge86 · September 13, 2019, 3:14pm

@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

mkhattab · September 13, 2019, 3:54pm

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

mkhattab · September 13, 2019, 5:49pm

@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?

AmoebeLabs · September 13, 2019, 9:38pm

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.

toofewacres · September 13, 2019, 10:11pm

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

Thanks

jimz011 · September 14, 2019, 8:26am

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.

yoni3210 · September 14, 2019, 10:08am

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
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:

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 !

jimz011 · September 14, 2019, 10:27am

Pretty much the wrong topic if you want to use my wallpaper 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!

jimz011 · September 14, 2019, 11:03am

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