Sorry, is there any Tutorial how to install this theme step by step?
Before updating again. Did the new card-mod version fix the bug it introduced? At least I hope it doesn’t introduce any more breaking changes 
It was mentioned here, remove ui_sound
or the intended way
It works. FYI you can click “reinstall” in hacs to revert in seconds instead of asking if something broke.
Hey @Mattias_Persson I am on my way trying to get some snippets of your interface. I am stuck on the part that I want to tap_action toggle the lights. I added it into the buttoN-card_templates.yaml (under light, as tap_action) but cant get it to work
What am I doing wrong?
light:
template: ['base']
custom_fields:
circle: >
[[[ if (entity.state === 'on' && entity.attributes.brightness) {
const brightness = Math.round(entity.attributes.brightness / 2.54);
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" style="
transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference}; stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${brightness}<tspan font-size="10">%</tspan></text></svg>`; } ]]]
tap_action:
action: call-service
service: light.toggle
service_data:
entity: '[[[ return entity.entity_id ]]]'
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: '[[[ return entity.attributes.friendly_name ]]]'
deviceID: this
card:
type: entities
entities:
- type: custom:light-popup-card
entity: '[[[ return entity.entity_id ]]]'
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
.................................
When you define template: light
- type: custom:button-card
entity: light.hallway
template: light
All code under light in button_card_templates gets added to that card. Another template base is inherited inside the template to avoid duplicate code.
button_card_templates:
light:
template: ['base']
And here is your tap_action, so you don’t need to add it to the light template. What may throw you off is ui_sound mentioned one post above which must be configured or removed.
base:
tap_action:
action: toggle
Thank you very much! I am blown away by the level of detail you put in things. really nice to grap things from it and. Thanks again for sharing
Hi I really like the design here, but i’m wondering if anyone can share a config for a mobile friendly view.
I have tried but can’t get it to scale properly on my phone.
hi mattias,
can you say me how i can change only the size from the time? i dont know why but its now smaler:
sidebar:
Hey Mattias,
How did you get the “smooth_color_wheel: true” to work? I tried to add a custom:light-entity-card, and it doesn’t show any wheel at all.
Hi Mattias,
I searched your project and didn’t find an SVG code that uses multiple states,
What I’m trying to do is change one of your SVG code to use multiple states instead of just on and off,
I would like to make and SVG icon that will show the current room temp and change icon color according to the mode entity selected: cool=green, heat=red, dry=orange, auto=orange, off=grey.
Something like that:
and this is the SVG code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" xmlns:v="https://vecta.io/nano"><circle cx="149" cy="150" r="143" fill="#228b22"/></svg>
you can try this:
[[[ if (entity.state === 'cool') {
return '<svg viewBox="0 0 300 300"><circle cx="149" cy="150" r="143" fill="#09f903"/></svg>'; }
if (entity.state === 'heat') {
return '<svg viewBox="0 0 300 300"><circle cx="149" cy="150" r="143" fill="#fb000c"/></svg>'; }
if (entity.state === 'dry') {
return '<svg viewBox="0 0 300 300"><circle cx="149" cy="150" r="143" fill="#fc8f01"/></svg>'; }
if (entity.state === 'auto') {
return '<svg viewBox="0 0 300 300"><circle cx="149" cy="150" r="143" fill="#fc8f01c"/></svg>'; }
else { return '<svg viewBox="0 0 300 300"><circle cx="149" cy="150" r="143" fill="#7d7d7c"/></svg>'; } ]]]
Thanks a lot
I run in to error when i use the code of yours,
lock:
####################################################
# #
# LOCK #
# #
####################################################
- platform: template
name: Dator
value_template: "{{ states('input_boolean.computer_lock') }}"
lock:
service: input_boolean.turn_on
entity_id: input_boolean.computer_lock
unlock:
service: input_boolean.turn_off
entity_id: input_boolean.computer_lock
Could you kindly give some details about code.
where do i place this code and whats its purpose?
is this a sensor or automation or ?
I have fix this Problem with the new themes.yaml (markdown).
Hey Mattias,
I’m using your great Fan moving icon, and it works great, but because I use it from my phone, every time I open the page, when the fan is off, I see the off-movement (like it finishes to move).
When I change it from on to off, it’s really nice that it continues to move a little, but when I just open the page and it’s already off, there’s no reason for it to move.
is there a way to fix?
thanks
HELP!!! Im completely new to home assistant and specially lovelace, what i have to do first to star using this “theme”, i already have all necesary cards installed, i think! i just need someone to show me how to make a simple Button like those and then i think that i can figure the rest
Hi Ben,
I have the same issue with the size of the time. Can you help me how you got that fixed?
did you get it working? any help to start it also