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

[yoni3210 (yoni mo)]

i’ve managed to it! Thank you @jimz011

i have one issue with the ac entities, i want to also when the ac off to be like the other buttons, all other states “cool”,“heat”,“on”, that it will highlighted like the other.
i don’t know how to it, here is the ac code below:

          - type: custom:simple-thermostat
            entity: climate.mzgn_khdr_shynh
            style: |
              ha-card {
                border-radius: 15px;
                background: rgba(255,255,240,0.9);            
              }                         
            name: AC Bedroom
            step_size: 1 

button template that i use for small entities :

 Button3:
   card: 
     type: 'custom:button-card'  
     color: auto
     size: 30%
     icon: '[[icon]]'
     entity: '[[entity]]'
     show_last_changed: true
     aspect_ratio: 1/1
     show_state: true
     name: '[[name]]'
     show_label: true
     tap_action:
       action: toggle
       haptic: light
     hold_action:
       action: more-info
       haptic: success
     styles:
       card:
         - padding-left: 10px
         - background-color: 'rgba(255,255,240,0.9)'
         - border-radius: 15px
       name:
         - justify-self: start
         - font-weight: bold
         - font-size: 13px
       label:
         - font-size: 11px
         - font-family: Helvetica
         - padding: 0px 10px
         - justify-self: start
       state:
         - font-size: 11px
         - font-family: Helvetica
         - padding: 1px 10px
         - justify-self: start
         - text-transform: capitalize
         - font-weight: bold
       grid:
         - grid-template-areas: '"i" "n" "s" "l"'
         - grid-template-columns: 1fr
         - grid-template-rows: 1fr min-content min-content
       img_cell:
         - justify-content: start
         - align-items: start
     state:
       - value: 'on'
         styles:
           card:
             - box-shadow: 0px 0px 3px 2px var
           name:
             - color: black
           state:
             - color: gray
           label:
             - color: black
         id: on-icon
       - value: 'off'
         styles:
           card:
             - opacity: 0.3
           label:
             - color: 'rgba(0, 0, 0, 0.0)'
           icon:
             - color: black
           name:
             - color: black
           state:
             - color: black
         id: off-icon
       - value: unavailable
         styles:
           card:
             - opacity: 0.2
             - color: grey
             - '--paper-item-icon-color': grey
           label:
             - color: 'rgba(0, 0, 0, 0.0)'

Someone can help?

[mkhattab (Pharaohnough)]

@AmoebeLabs I’ve managed to get your theme working with the decluttering template but I was wondering how you can have the template as a separate file that you include. You seem to have it that way as it is a separate file in your repo. Right now I have the decluttering template written using raw config editor right under the resources section. The raw config editor does not seem to accept the tradition !include

[jimz011 (Jim)]

You will need to use yaml mode if you want to use includes. No other way.

I’d suggest building your lovelace in yaml mode if you want to use his themes.

[AmoebeLabs (Marco)]

That is great!

But as @jimz011 already mentioned, if you want to use decluttering templates, re-use of components and more advanced settings, the yaml mode is the way to go.

The config editor can’t handle includes and also can’t reuse views/cards.

I wouldn’t want to go back to the config editor, as it limits my configuration enormously and gives me maintenance problems as it is one big file.

[mkhattab (Pharaohnough)]

Thanks @jimz011 and @AmoebeLabs
I do the majority of my UI in raw config editor and not the UI editor so I don’t have a problem switching to YAML mode. Once I’m there, I’m assuming includes work like they do in configuration.yaml because the ui is just another yaml file right?

[AmoebeLabs (Marco)]

@toofewacres

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

Yes I will do that in the upcoming days. A bit busy right now

@jimz011

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 @MarsWarrior and I use, at least I think he does)

Yes, I define everything, if possible in the themes. So YES, wallpapers are part of the theme…

@jimz011

Hey @MarsWarrior 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.

He Jim. That is great to hear. Is it only theming or also some things in the decluttering templates and cards?

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.

That is the way to go. Sharing == learning, new idea’s and valuable feedback. I will probably visit your github repo again to see how you solved certain problems or views.
Acknowledging the work of others is also another way to go. Nothing wrong with re-using code, idea’s and solutions with a reference to the source. Thanks!.

(Might be later as my upcoming update is huge and writing docs take a lot of time)

Breek me de bek niet open
I’m trying to finish a new card, and since it is very flexible, it takes a lot, and I mean a lot of effort to write the documentation. The card can handle multiple entities and attributes in a flexible definable layout with additional things like circles, lines, icons and text. On top of that, you can add animations depending on the state change of an entity (like colors and real animations).

It is about this card:

…and these…

And a minimal quality gif of the buttons & animations:

Fixing bugs, and creating documentation. We should make robots for that, so we can continue creating actual things which make us happy

[jimz011 (Jim)]

Exactly. Anyways I haven’t copied your decluttering card no. I still use the same as I have always used (it works fine and changing too much, which I already have for my upcoming update makes updating very difficult for the masses and I know a lot of people actually use my config). In that way I have tried to change as less as possible in both your theme file as in my decluttering cards (which seems to have worked out very well for at least the light theme). Yes I have changed some colors to reflect the colors I already have better with your theme and I had to make adjustments to the primary color as that is the color the header gets in iOS (and unfortunately up until now I havent found a great solution to this. If only the iOS Header could be split from the primary color, but well we have to work with what we have).

Actually I have multiple reasons why I do not want to change too much in the themes. As you post them on github and other people use them they can use it with my configuration with only minimal changes. It is around 8 lines that I have changes and most changes revolve around that damn header. I am still trying to recreate my dark theme in your style (which took me a bit more changes).

Acknowledging other peoples work is indeed a great thing and greatness comes from little things.

I honestly like the themes you create even though the dark theme is not in the colors I use in my config. But your themes are definitely one of the better ones around here!

[AmoebeLabs (Marco)]

@jimz011

I had to make adjustments to the primary color as that is the color the header gets in iOS (and unfortunately up until now I havent found a great solution to this. If only the iOS Header could be split from the primary color, but well we have to work with what we have).

What header in iOS? You mean in the below picture the wheat background with black/dark grey font?
Or are you referring to something completely different??

[jimz011 (Jim)]

I actually said it wrong, I meant the status bar in iOS (the one at the top which has the time in it and wifi status).

The bar will only color with a primary color, in any other case it will stay black. Or I will have to create a blank theme with only primary color black. Have it start with HA and then change theme manually in the profile menu as the status bar only changes color when doing an actual service-call.

Not ideal as you can see. It is only apparent on iPhones/iPads and most notably the ones with a notch.

[thmry]

Completely off-topic, but how do you get the temperatures of your fridge and freezer? Did you just stick a temperature sensor inside of them or some other way?

[yoni3210 (yoni mo)]

stick them inside, working great without any issue
https://www.gearbest.com/living-appliances/pp_344665.html

[AmoebeLabs (Marco)]

Just released my flexible horseshoe card:

Lovelace: Flexible Horseshoe Card (Donut graph, flexible layout, multiple entities, actions & animations), including next-gen experimental examples

[image] Lovelace: Flexible Horseshoe Card Flexible looks-like-a-horseshoe card for Home Assistant Lovelace UI [image] The Lovelace view of the above examples is in the repository in the examples folder. So you can see how these layouts are done Introduction The flexible horseshoe card can display data from entities and attributes from the sensor and other domains. It displays the current state and for the primary entity it fills the horseshoe with a color depending on the min and max v…

Now I will have time to update the themes again

[Steven_Rollason]

I don’t know if I’m missing something, but where can I download the Teal theme from?
The GitHub repository just seems to have the readme file and screenshots, but no theme files.

[jimz011 (Jim)]

The themes are in his “current home assistant config” repo. You will find his themes there.

[Steven_Rollason]

Thanks, I hadn’t noticed that

[AmoebeLabs (Marco)]

@Steven_Rollason

I don’t know if I’m missing something, but where can I download the Teal theme from?
The GitHub repository just seems to have the readme file and screenshots, but no theme files.

I will double check that location. Thanx for reporting!

@jimz011

The themes are in his “current home assistant config” repo. You will find his themes there.

That is true, but they should be also with the theme, otherwise ppl keep searching for that!

[Steven_Rollason]

I’m liking these themes, but I had a problem with the dialogues having transparent background and making them difficult to read. The more-info dialogue title bar also looks like white text on a slightly off-white background

And here is an example (using the orange Nyx theme):

I’ve got it working for me by making these changes to the theme locally (the more-info dialogue appears to use secondary-background-color as the background colour of the title bar):

paper-dialog-background-color: '#313131'
secondary-background-color: 'var(--mdc-orange-darken-2)'

(I got the hex colour for the dialogue background by taking a screenshot of a more-info popup, opening it in an image editor, and using the colour picker tool to find the colour)

[AmoebeLabs (Marco)]

@Steven_Rollason

I’m liking these themes, but I had a problem with the dialogues having transparent background and making them difficult to read. The more-info dialogue title bar also looks like white text on a slightly off-white background

A yes, that is caused by official material design rules where you use an opaque color to elevate the foreground from the background. But that doesn’t work for popup’s of course. Google forgot to mention that in their documentation

@Steven_Rollason

I’ve got it working for me by making these changes to the theme locally (the more-info dialogue appears to use secondary-background-color as the background colour of the title bar):

paper-dialog-background-color: '#313131'
secondary-background-color: 'var(--mdc-orange-darken-2)'

I want to update all the themes, and will take this fix into the next release, so the dialog background isn’t opaque anymore but the pure color it is meant to be, which seems to be #313131

I will tag the current version with 1.0 and the updated theme to 1.1.

Nice card on the background btw

[vlefevre86]

Hey there !

Any news on theses awesome themes and cards ? I would love to see your full config, it looks so great…

[1113 (锐 涂)]

Wow … it really looks good