Thanks you so much 
I will definitely take a look at it and try it out 
1 Like
You might also want to create a separate thread for this in the forum @Arroma .
I think that more people will be interested in the design and may have questions and further ideas 
1 Like
Then I’ll open a thread, thanks for the suggestion and above all for your interest!
2 Likes
Hi,
Trying to implement this wonderful theme to my setup and got stuck when adding the lights cards. I got this error message:
Can anyone help ?
did you set entity in your card?
Put the whole card code here please
That was the mistake, I changed the entity on one place but not on the other one 
My attempt on a HVAC card for my Aquaras, which doesn’t break the whole design.
Though I can not decide which version I will use
Here a different variant, which has the swipe card feature included and matches the rounded version.
1 Like
Super nice! Can you share you code? Would go for both, as it wouldn’t bother me to have the temperature curve and the state shown below in the button card.
Sure. Here you go. Its my decluttering-card template for the first variant. Its using mini-graph-card and custom-button-card.
Be aware,that the color variables are related to leon rounded theme.
You need to make a button, which just turns on and off your climate entity.
material_hvac:
default:
- entity: climate.your_climate
- sensor_temp: here temperature sensor
- sensor_hum: here humidity sensor
- bg_color_control: var(--primary-background-color)
- bg_color_graph: var(--primary-background-color)
- bg_color_off_graph_value: var(--primary-text-color)
- bg_color_on_graph_value: var(--red)
card:
type: custom:button-card
entity: '[[entity]]'
icon: mdi:thermostat
tap_action:
action: toggle
haptic: medium
show_icon: false
show_name: false
custom_fields:
graph:
card:
type: custom:mini-graph-card
entities:
- entity: '[[sensor_temp]]'
color: red
index: 0
name: Temperatur
align_state: left
- color: var(--blue)
entity: '[[sensor_hum]]'
index: 0
name: Feucht
show_state: true
y_axis: secondary
align_state: right
show:
icon: false
name: false
labels: false
legend: true
card_mod:
style: |
ha-card {
background-color:
{%- set hvac = states('[[entity]]') %}
{%- if hvac == 'heat' %}[[bg_color_on_graph_value]]
{%- else %}[[bg_color_off_graph_value]]
{%- endif %};
border-radius: 24px;
font-size: 28px !important;
}
.graph {
background: [[bg_color_graph]];
display: flex;
overflow: hidden; /* Temporary fix for graph overflow bug */
}
.graph__legend {
margin-top: 0px !important;
justify-content: center !important;
}
.graph__legend__item {
font-size: 10px !important;
line-height: 16px !important;
padding: 6px 10px !important;
margin-top: 0px !important;
border-radius: 100px !important;
z-index: 1 !important;
}
.states{
height: 1.5rem;
font-size: 12px;
font-weight: 500 !important;
color:
{%- set hvac = states('[[entity]]') %}
{%- if hvac == 'heat' %}var(--white) !important
{%- else %}var(--primary-background-color) !important
{%- endif %};
}
.state__value {
font-family: 'Montserrat'!important;
}
.state__uom {
font-size: 12px !important;
color: var(contrast2);
align-self: flex-end !important;
}
.states--secondary {
font-size: 12px !important;
color: {%- set hvac = states('[[entity]]') %}
{%- if hvac == 'heat' %}var(--black) !important
{%- else %}var(--contrast10) !important
{%- endif %};
align-self: flex-start !important;
}
button_up:
card:
type: custom:button-card
icon: mdi:chevron-up
name: Increase Temp
show_name: false
tap_action:
action: call-service
service: climate.set_temperature
service_data:
entity_id: '[[entity]]'
temperature: |
[[[
var temp = ((states['[[entity]]'].attributes.temperature) + 0.5);
return temp;
]]]
styles:
icon:
- width: 28px
- color: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'var(--contrast20)';
} else {
return 'var(--contrast8)';
}
]]]
card:
- background: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'var(--contrast2)';
} else {
return 'none';
}
]]]
- animation: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'blink 3s';
}
]]]
button_target_temp:
card:
type: custom:button-card
entity: '[[entity]]'
show_name: true
show_state: false
show_icon: false
name: |
[[[
var temp = (states['[[entity]]'].attributes.temperature);
return temp;
]]]
styles:
name:
- font-size: 21px
- background: none
- color: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'var(--contrast20)';
} else {
return 'var(--contrast8)';
}
]]]
- border-radius: 50px
- padding: 8px
card:
- background: none
- animation: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'blink 3s';
}
]]]
button_down:
card:
type: custom:button-card
icon: mdi:chevron-down
name: Decrease Temp
show_name: false
tap_action:
action: call-service
service: climate.set_temperature
service_data:
entity_id: '[[entity]]'
temperature: |
[[[
var temp = ((states['[[entity]]'].attributes.temperature) - 0.5);
return temp;
]]]
styles:
icon:
- width: 28px
- color: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'var(--contrast20)';
} else {
return 'var(--contrast8)';
}
]]]
card:
- background: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'var(--contrast2)';
} else {
return 'none';
}
]]]
- animation: |
[[[
if (states['[[entity]]'].state === 'heat') {
return 'blink 3s';
}
]]]
styles:
grid:
- grid-template-columns: 80% 20%
- grid-template-areas: '"graph button_up" "graph button_target_temp" "graph button_down"'
- grid-template-rows: 1fr 1fr 1fr
card:
- height: 100%
- padding: 0px 0px 0px 0px
- margin: 0px 0px 0px 0px
- background: '[[bg_color_control]]'
custom_fields:
button_up:
- width: 80%
- padding: 0
- margin: 0
- justify-self: center
- align-self: center
button_target_temp:
- width: 100%
- padding: 0
- justify-self: center
button_down:
- width: 80%
- padding: 0
- margin: 0
- justify-self: center
- align-self: center
graph:
- heigth: 100%
- width: 100%
- padding: 0
- margin: 0
- overflow: visible
1 Like
Thanks will have a look!
can someone help me. I don get it
type: custom:button-card
name: Schlafzimmer
icon: mdi:bed-king-outline
entity: sensor.rt_schlafzimmer_aktuelle_temperatur
show_state: true
tap_action:
action: navigate
navigation_path: '#pop-up-schlafzimmer'
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:ceiling-light
entity: light.00169be9a0f15a_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--red)' if is_state('light.00169be9a0f15a_2', 'on') else 'var(--contrast2)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: template
tap_action:
action: toggle
icon: mdi:led-strip-variant
entity: light.00169be9a0f15a_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--red)' if is_state('light.00169be9a0f15a_2', 'on') else 'var(--contrast2)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: template
tap_action:
action: toggle
icon: mdi:weather-windy
entity: light.00169be9a0f15a_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--red)' if is_state('light.00169be9a0f15a_2', 'on') else 'var(--contrast2)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
btn1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:fan
entity: light.00169be9a0f15a_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--green)' if is_state('light.00169be9a0f15a_2', 'on') else 'var(--green-tint)' }};
padding: 0px!important;
border-radius: 100px!impportant;
styles:
grid:
- grid-template-areas: '"n btn1 btn" "s btn1 btn" "i btn1 btn"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content 1fr
img_cell:
- justify-content: start
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: var(--contrast10)
- border-radius: 500px
icon:
- width: 45px
- color: var(--contrast1)
- opacity: '0.6'
card:
- padding: 10px 0px 10px 10px
- background-color: var(--contrast4)
custom:fields:
btn:
- justify-self: end
- align-self: start
btn1:
- justify-self: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 13px
- font-weight: 500
- color: var(--contrast20)
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 11px
- opacity: '0.7'
solution:
type: custom:button-card
name: Wohnzimmer
show_name: false
show_state: false
show_icon: true
tap_action:
action: navigate
navigation_path: '#pop-up-schlafzimmer'
icon: mdi:bed-king-outline
styles:
card:
- background-color: var(--contrast4)
- padding: 10px 0px 10px 10px
grid:
- grid-template-areas: '"name name btn" "state btn1 btn" "icon btn1 btn"'
- grid-template-columns: 3fr min-content min-content
- grid-template-rows: 1em 1em 1fr
img_cell:
- justify-content: start
- position: absolute
- width: 80px
- height: 80px
- left: 0
- bottom: 0
- margin: 0 0 -15px -15px
- background: var(--contrast10)
- border-radius: 500px
icon:
- width: 45px
- color: var(--contrast1)
- opacity: '0.6'
custom_fields:
name:
- align-self: start
- justify-self: start
- background: none
state:
- align-self: start
- justify-self: start
- background: none
btn1:
- align-self: end
- justify-self: end
- padding-right: 8px
btn:
- align-self: end
- justify-self: end
icon:
- align-self: start
- justify-self: start
custom_fields:
name:
card:
type: custom:button-card
name: Schlafzimmer
styles:
card:
- color: var(--contrast20)
- font-size: 13px
- font-weight: 500
- background: none
state:
card:
type: custom:button-card
name: |
[[[
return states['sensor.rt_schlafzimmer_aktuelle_temperatur'].state + '<span style="font-size:0.7em">°C</span>';
]]]
styles:
card:
- color: var(--contrast20)
- font-size: 11px
- background: none
- opacity: '0.7'
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:ceiling-light
entity: light.00169be9a0f15a_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--red)' if is_state('light.00169be9a0f15a_2', 'on') else 'var(--contrast2)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: template
tap_action:
action: toggle
icon: mdi:led-strip-variant
entity: light.00169be9a0f15a_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--red)' if is_state('light.00169be9a0f15a_2', 'on') else 'var(--contrast2)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
- type: template
tap_action:
action: toggle
icon: mdi:weather-windy
entity: input_boolean.helfer_luften_schlafzimmer
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--blue)' if is_state('input_boolean.helfer_luften_schlafzimmer', 'on') else 'var(--contrast2)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
{% if is_state('input_boolean.helfer_luften_schlafzimmer', 'on') %}
animation: blinkAnimation 1s infinite; /* Blinken mit einer Sekunde Dauer */
{% endif %}
}
@keyframes blinkAnimation {
0% {
--chip-background: var(--blue);
}
50% {
--chip-background: var(--contrast3);
}
100% {
--chip-background: var(--blue);
}
}
btn1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:fan
entity: light.00169be9a0f15a_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--green)' if is_state('light.00169be9a0f15a_2', 'on') else 'var(--contrast2)' }};
padding: 0px!important;
border-radius: 100px!impportant;
1 Like
Is this still working as of Feb 2024? There are a few things that don’t seem to work for me, one of those being the nav bar at the bottom. My nav bar is still at the top.
EDIT
I got this working. The problem is at install I skipped the following step to set this as my default theme system wide:
- Next, open the service named “Home Assistant Frontend: Set theme” and run the service twice with both the “Dark” and “Light” modes checked.
This didn’t work for me using the old group definition, but I was able to get it to work with the light group type (posting here for others in the future troubleshooting the same thing).
Example of my group
light:
- platform: group
name: "New Downstairs Lights"
entities:
- light.kitchen_ceiling
- light.coffee_bar_light_light
- light.sink_light_light
- light.living_room
- light.dining_room
- light.downstairs_hallway_light_light_2
And here is my template using that group:
- platform: template
lights:
on_downstairs_lights:
friendly_name: "On Downstairs Lights"
level_template: >
{% set data = namespace(numbers=[]) %}
{% for s in state_attr('light.new_downstairs_lights', 'entity_id') %}
{% if is_state(s, 'on') %}
{% set data.numbers = [state_attr(s, "brightness")] + data.numbers %}
{% endif %}
{% endfor %}
{{data.numbers|average|round(0)}}
value_template: >
{%- set data = namespace(res="off") -%}
{% for s in state_attr('light.new_downstairs_lights', 'entity_id') %}
{% if is_state(s, 'on') %}
{%- set data.res = "on" -%}
{% endif %}
{%- endfor -%}
{{data.res}}
temperature_template: >
{% set data = namespace(numbers=[]) %}
{% for s in state_attr('light.new_downstairs_lights', 'entity_id') %}
{% if state_attr(s, "color_temp") %}
{% set data.numbers = [state_attr(s, "color_temp")] + data.numbers %}
{% endif %}
{% endfor %}
{{data.numbers|average|round(0)}}
turn_on:
- service: light.turn_on
data:
entity_id: light.new_downstairs_lights
turn_off:
- service: light.turn_off
data:
entity_id: light.new_downstairs_lights
set_level:
- service: light.turn_on
target:
# wat te doen als alles uit staat? If statement om alles aan te zetten
entity_id: "{{ expand('light.new_downstairs_lights') | selectattr('state','eq','on') | map(attribute='entity_id') | join(',') }}"
data:
brightness: "{{ brightness }}"
set_temperature:
- service: light.turn_on
target:
entity_id: "{{ expand('light.new_downstairs_lights') | selectattr('state','eq','on') | map(attribute='entity_id') | join(',') }}"
data:
color_temp: "{{ color_temp }}"
Since they’re both of the “light” type, they are under the same light block. See below for the full code block with both of them:
light:
- platform: group
name: "New Downstairs Lights"
entities:
- light.kitchen_ceiling
- light.coffee_bar_light_light
- light.sink_light_light
- light.living_room
- light.dining_room
- light.downstairs_hallway_light_light_2
- platform: template
lights:
on_downstairs_lights:
friendly_name: "On Downstairs Lights"
level_template: >
{% set data = namespace(numbers=[]) %}
{% for s in state_attr('light.new_downstairs_lights', 'entity_id') %}
{% if is_state(s, 'on') %}
{% set data.numbers = [state_attr(s, "brightness")] + data.numbers %}
{% endif %}
{% endfor %}
{{data.numbers|average|round(0)}}
value_template: >
{%- set data = namespace(res="off") -%}
{% for s in state_attr('light.new_downstairs_lights', 'entity_id') %}
{% if is_state(s, 'on') %}
{%- set data.res = "on" -%}
{% endif %}
{%- endfor -%}
{{data.res}}
temperature_template: >
{% set data = namespace(numbers=[]) %}
{% for s in state_attr('light.new_downstairs_lights', 'entity_id') %}
{% if state_attr(s, "color_temp") %}
{% set data.numbers = [state_attr(s, "color_temp")] + data.numbers %}
{% endif %}
{% endfor %}
{{data.numbers|average|round(0)}}
turn_on:
- service: light.turn_on
data:
entity_id: light.new_downstairs_lights
turn_off:
- service: light.turn_off
data:
entity_id: light.new_downstairs_lights
set_level:
- service: light.turn_on
target:
# wat te doen als alles uit staat? If statement om alles aan te zetten
entity_id: "{{ expand('light.new_downstairs_lights') | selectattr('state','eq','on') | map(attribute='entity_id') | join(',') }}"
data:
brightness: "{{ brightness }}"
set_temperature:
- service: light.turn_on
target:
entity_id: "{{ expand('light.new_downstairs_lights') | selectattr('state','eq','on') | map(attribute='entity_id') | join(',') }}"
data:
color_temp: "{{ color_temp }}"
I’m unsure if I was supposed to put this into a groups.yaml file but I put it in my configuration.yaml and it’s working so I’m going to leave it unless I find out some optimization for using groups.yaml. If I start declaring a lot of groups in YAML I will probably move it so I don’t clutter my configurations.yaml but for now not going to change something that’s working.
Thanks everyone and let’s keep contributing to this thread to make sure this awesome theme is still usable for anyone just installing it!
Could you post the decluttering template for the second variant? Looks really nice
Sorry for my late reply. I will make a decluttering card of my latest version. I’ve “translated” Leonz version to one, which is using Mini-Graph card, so I can apply colors to the graph-lines.
Has also the swipe card feature
2 Likes
This is my latest project. I made my old washing maschine “smart” with a smart plug. The available automations, did not fit my needs as I wanted to create a nice card.
Now, I’ve created template sensors to check the power consumption (with two thresholds on and off) and return if it’s starting, washing, finishing and end. Also the remaining time (manually set average running time in the sensor) and end time. This card is the result. Its a button to turn off and on the plug and if it’s on, it shows the state of the washing maschine.
Thanks to some nice scripts Leon showed on his YouTube channel!
9 Likes
Waiting for the code 
Sure. Here is my code for the 3 template sensors. The card needs all of them to work. If you dont want the timer or end -time, you csn just use the first template sensor alone and work with the attributes.
my threshold are set
start: 7 (watt)
End: 5 (watt)
the 2 values 30 are the time it needs to detect the thresholds.
If the sensor detects start >= 30 (s) the attribute cycle switches from starting to washing.
if it detects end for >= 30 (s) it switches from finishing to end.
the last sensor has number 59 inside. Thats the average running time of our washing mashine.
##### Waschmaschine #####
- platform: template
sensors:
waschmaschine_status:
friendly_name: "Waschmaschine Status"
value_template: >-
{% set power = states('sensor.steckdose_waschkuche_power') | float %}
{% set cycle_state = state_attr('sensor.waschmaschine_status', 'cycle') %}
{% set threshold_start = 7 %}
{% set threshold_end = 5 %}
{% if cycle_state == 'washing' %}
{% set threshold_start = threshold_end %}
{% endif %}
{% if power > threshold_start %}
on
{% elif power <= threshold_end %}
off
{% endif %}
attribute_templates:
cycle: >-
{% if is_state('sensor.waschmaschine_status', 'on') %}
{% if (as_timestamp(now()) - as_timestamp(states.sensor.waschmaschine_status.attributes.triggered)) >= 30 %}
washing
{% else %}
starting
{% endif %}
{% elif is_state('sensor.waschmaschine_status', 'off') %}
{% if (as_timestamp(now()) - as_timestamp(states.sensor.waschmaschine_status.attributes.triggered)) >= 30 %}
end
{% else %}
finishing
{% endif %}
{% else %}
unknown
{% endif %}
running_end: >-
{% if is_state_attr('sensor.waschmaschine_status', 'cycle', 'washing') or
is_state_attr('sensor.waschmaschine_status', 'cycle', 'finishing') %}
running
{% else %}
end
{% endif %}
triggered: >-
{{ as_timestamp(states.sensor.waschmaschine_status.last_changed) | timestamp_custom('%Y-%m-%d %H:%M:%S', true) }}
- platform: template
sensors:
waschmaschine_running:
friendly_name: "Waschmaschine Running"
value_template: >-
{% if is_state_attr('sensor.waschmaschine_status', 'cycle', 'washing') or
is_state_attr('sensor.waschmaschine_status', 'cycle', 'finishing') %}
running
{% else %}
end
{% endif %}
- platform: template
sensors:
waschmaschine_timer:
friendly_name: "Waschmaschine Timer"
value_template: >-
{% if is_state('sensor.waschmaschine_running', 'running') %}
on
{% else %}
off
{% endif %}
attribute_templates:
triggered: >-
{{ as_timestamp(states.sensor.waschmaschine_timer.last_changed) | timestamp_custom('%Y-%m-%d %H:%M:%S', true) }}
remaining: >-
{% if is_state('sensor.waschmaschine_timer', 'off') %}
00:00:00
{% else %}
{% set remaining_time = 59 * 60 %}
{% set time_passed = as_timestamp(now()) - as_timestamp(states.sensor.waschmaschine_timer.attributes.triggered) %}
{% set remaining_seconds = remaining_time - time_passed %}
{% if remaining_seconds > 0 %}
{{ remaining_seconds | timestamp_custom('%H:%M:%S', false) }}
{% else %}
00:00:00
{% endif %}
{% endif %}
remaining_perc: >-
{% if is_state('sensor.waschmaschine_timer', 'off') %}
0
{% else %}
{% set total_time = 59 * 60 %}
{% set time_passed = as_timestamp(now()) - as_timestamp(states.sensor.waschmaschine_timer.attributes.triggered) %}
{% set remaining_seconds = total_time - time_passed %}
{% set remaining_perc = (remaining_seconds / total_time) * 100 %}
{% if remaining_perc > 0 %}
{{ remaining_perc | round(2) }}
{% else %}
0
{% endif %}
{% endif %}
end_time: >-
{% set remaining_time = 59 * 60 %}
{{ (as_timestamp(states.sensor.waschmaschine_timer.attributes.triggered) + remaining_time) | timestamp_custom('%Y-%m-%d %H:%M:%S', true) }}
1 Like