Lovelace is the interface of Home Assistant, used to display all sorts of information. However, sometimes there can be an information overload. I like it simple and clean. Here is what I’ve done shared on Github. Thanks for this awesome community, and thank you!
77 Likes
Great work @N-l1. Think I’ll play around with your base and try out depressed buttons per some notes from From hype4.com and
attached
5 Likes
v0.1 Depressed Buttons!
Features:
-
Introduces all new depressed button in the horizontal_buttons card, thanks to the awesome idea by @NotYourAverageAl
-
Better dark theme shadows
Thanks everyone!
5 Likes
@N-l1 I haven’t looked at your code yet as I’m on my mobile for a couple of days. Are the depressed buttons in your setup just static cards?
I was going to make a card depressed when it was toggled e.g a light going on would go depressed and go back to normal when off.
Like so
1 Like
@NotYourAverageAl It is based on the state, just like your example. When it’s on it is depressed and when it’s off it’s back to normal 
Wow, I just spend the last 4 days or so configuring my UI to be so plain and simple as possible, I am new to UI configuration so it was not easy. Had I seen yours before, it would have saved me a lot of time, because it looks great.
I spent some time yesterday trying to get it to work. It does, but the day/night automation is giving errors when copy/pasted in the automations.yaml file. I tested it with two yaml checkers and both are giving errors, so after some trial/error I got it working like this:
# Example automations.yaml entry
- alias: "Light theme after Sunrise"
trigger:
platform: sun
event: sunrise
action:
- service: frontend.set_theme
data:
# Change this to the name of your light theme
name: light
- alias: "Dark theme after Sunset"
trigger:
platform: sun
event: sunset
action:
- service: frontend.set_theme
data:
# Change this to the name of your dark theme
name: dark
- alias: 'Light theme after reboot in day'
trigger:
platform: homeassistant
event: start
condition:
- condition: state
entity_id: sun.sun
state: 'above_horizon'
action:
- service: frontend.set_theme
data:
# Change this to the name of your light theme
name: light
- alias: 'Dark theme after reboot in night'
trigger:
platform: homeassistant
event: start
condition:
- condition: state
entity_id: sun.sun
state: 'below_horizon'
action:
- service: frontend.set_theme
data:
# Change this to the name of your dark theme
name: dark
Don’t know if it was an error on my side though.
Thanks for making this available!
@N-l1 Ha, you’ve done all the hard work. I’ll fork your repo when I get a chance…still on holidays.
Thanks
Everyone!
It is not on your side, I made a silly mistake with the indentations 
I have now copied the new code over and updated the readme.
Glad you like it! 
Thanks! Happy holidays! 
Thanks! I don’t own a nest hub so I can’t test it, it should work and surely will look great!
This looks great! Would be nice to have a video tutorial for thode of us who are new to HA 
Thanks @smart_guy!
That definitely will go on the to-do list. 
I’m actually also going on holidays for a couple days…
The readme on the GitHub repo is pretty detailed on how you can add the cards. If you read the readme, I think you should be fine! If you have any issues let me know! 
1 Like
This looks amazing! I have been testing this for the last few hours and it looks very good. One thing I have to mention: I notice my HA server disconnects from time to time. This has never ever happened before. Since I’m trying to build this new lovelace menu, it has happened around 15 times in the last 5 hours. Suddenly everything is empty and I see ‘reload lovelace’ in my screen. Other devices cannot load anything as well and Google Home has a delay with commands, till HA is back up. I don’t know it this is due to some components that are required, or because I’m editing a lot now and stressing HA out currently.
One other quick question: how can I add extra states with the big texts? Right now it says ‘There is currently nothing playing’ when the state of the mediaplayer is to ‘off’. What I want is to add an extra line so it says ‘There is currently music playing’ when the state is ‘playing’. And also a third one when the music is paused. So that way there are multiple texts, depending on the state of the mediaplayer.
- content: >
# There is currently {% if
is_state('media_player.multispeakers_cast', 'off') %} nothing
{% else %} {{states('media_player.multispeakers_cast')}} {%
endif %} playing
The “reload Lovelace” problem seems to happen as you said when editing Lovelace a lot. I don’t think it is because of this particular setup, since I’ve had that problem before editing a completely different Lovelace setup. I can say however the system will be stable after you finish editing as it has been for me.
The template would probably look something like this:
Please note this is not tested, since I’m currently travelling but will soon be home and will be able to further test this.
- content: >
# {% if is_state('media_player.multispeakers_cast', 'off') %}
There is currently nothing playing
{% elif is_state('media_player.multispeakers_cast', 'playing') %}
There is currently music playing
{% elif is_state('media_player.multispeakers_cast', 'paused') %}
The music is currently paused
{% endif %}
1 Like
Thanks for the confirmation, I have no worries now 
Also thanks a lot for the code. The code does work, however somehow the style doesn’t work anymore with that code. The style code seems to be fine though. This is my code (don’t mind the foreign (Dutch) language in there)
- content: >
# {% if is_state('media_player.multispeakers_cast', 'off') %}
Er speelt momenteel geen muziek af.
{% elif is_state('media_player.multispeakers_cast', 'playing') %}
Er speelt momenteel muziek af.
{% elif is_state('media_player.multispeakers_cast', 'paused') %}
De muziek is gepauzeerd.
{% endif %}
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
} h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
Any thoughts? I am trying to learn basic coding with this as well, so any feedback is greatly appreciated
I’ve finally got home. After some tinkering and testing this seems to work.
- content: >
# {% if is_state('media_player.multispeakers_cast', 'off')%} Er speelt momenteel
geen muziek af. {% elif is_state('media_player.multispeakers_cast', 'playing')%} Er
speelt momenteel muziek af. {% elif is_state('media_player.multispeakers_cast',
'paused')%} De muziek is gepauzeerd. {% endif %}
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
Hope this helps! 
2 Likes
You are a legend
I can’t wait to further explore this great theme and versatility of it! I have managed to give the ‘pressed’ look to the big buttons too by copying it from the smaller ones. Looks great for scenes!
I want to create context aware information under the ‘Scene’ line when 1 or more scenes are turned on. I think I will manage that with your previous codes
2 Likes
Wow that’s looking really nice!
Glad I helped! If you have any more questions please let me know, I’m glad to help!
Thank you! Btw, is there a way to ignore the sun.sun state and force the day theme without having to change the scripts? I really really like the day time theme and think about having that on 24/7. But I suspect I have to remove/change the sun.sun shadow styling.
Also, can you explain to me how I can add an extra line of code with the contextual scripts (like the Spotify one). I used that example with different cards and changed some values which worked fine. But then I added an extra line, because I wanted an extra variant, but then the code breaks and doesn’t work anymore.
For example: what would I need to add where so I can add an extra variable?
# {% if is_state('input_boolean.gamemodus', 'on')%} Game Scène staat
aan, succes met gamen! {% elif is_state('input_boolean.moviemode',
'on')%} Film Scène staat aan, geniet van de film! {% elif
is_state('input_boolean.gamemodus', 'off')%} Kies een scène en
ontspan. {% endif %}
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
I tried copying one line and pasting it again and changing text, but that broke the code.
{% elif is_state('input_boolean.moviemode','on')%} Film Scène staat aan, geniet van de film!
Yes, you would have to remove the night styling. So you would have to change from this:
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% else %}
-8px -8px 8px 0 rgba(77, 77, 77,.5),8px 8px 8px 0 rgba(0,0,0,.3);
{% endif %}
}
To this:
style: |
ha-card {
box-shadow: -8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
}
For pressed buttons, from this:
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') and is_state('switch.dining_table', 'on') %}
inset -4px -4px 8px 0 rgba(255,255,255,.7), inset 4px 4px 8px 0 rgba(0,0,0,.07);
{% elif is_state('sun.sun', 'above_horizon') and is_state('switch.dining_table', 'off') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') and is_state('switch.dining_table', 'on') %}
inset -4px -4px 12px 0 rgba(77, 77, 77,.5), inset 4px 4px 12px 0 rgba(0,0,0,.7);
{% elif is_state('sun.sun', 'below_horizon') and is_state('switch.dining_table', 'off') %}
-8px -8px 8px 0 rgba(77, 77, 77,.5),8px 8px 8px 0 rgba(0,0,0,.3);
{% endif %}
}
To this:
style: |
ha-card {
box-shadow:
{% if is_state('switch.dining_table', 'on') %}
inset -4px -4px 8px 0 rgba(255,255,255,.7), inset 4px 4px 8px 0 rgba(0,0,0,.07);
{% else %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% endif %}
}
For the scenes template, adding another {% elif…%} should work fine, something like this:
#{% if is_state('input_boolean.gamemodus', 'on')%} Game Scène staat
aan, succes met gamen! {% elif is_state('input_boolean.moviemode',
'on')%} Film Scène staat aan, geniet van de film! {% elif
is_state('input_boolean.gamemodus', 'off')%} Kies een scène en
ontspan. {% elif is_state('input_boolean.another_variable', 'on')%} Some
other text {% endif %}
1 Like