i like the spinning fan icon as well as the lock status.
can you share this?
Spining icon and blinking cards are in the button card documentation 
Spin : GitHub - custom-cards/button-card: âď¸ Lovelace button-card for home assistant
Blink : GitHub - custom-cards/button-card: âď¸ Lovelace button-card for home assistant
1 Like
thank you very much, I did not know that.
1 Like
I have problem with theme:
I added this in my configuration.yaml:
frontend:
themes: !include lovelace/themes/minimalist_theme.yaml
and this in minimalist_theme.yaml:
#Couleurs
google-red-500 : '#F54436'
google-green-500 : '#01C852'
google-yellow-500 : '#FF9101'
google-blue-500 : '#3D5AFE'
google-violet-500 : '#661FFF'
google-grey-500: '#BBBBBB'
couleur-rouge : 245, 68, 54
couleur-vert : 1, 200, 82
couleur-jaune : 255, 145, 1
couleur-bleu : 61, 90, 254
couleur-violet : 102, 31, 255
couleur-gris : 187, 187, 187
couleur-rose : 233, 30, 99
couleur-theme : 51,51,51
# Card
card-background-color: '#FAFAFA'
box-shadow: '0px 2px 4px 0px rgba(0,0,0,0.16)'
border-radius: '20px'
border-color: '#EAEAEA'
primary-color: '#434343'
light-primary-color: '#fce8e6'
paper-item-icon-color: '#434343'
paper-toggle-button-checked-ink-color: '#3D5AFE'
paper-toggle-button-checked-button-color: '#3D5AFE'
paper-toggle-button-checked-bar-color: '#3D5AFE'
accent-color: '#ff8100'
switch-checked-color: '#3D5AFE'
#Sidebar
sidebar-selected-text-color: '#d93025'
sidebar-text-color: '#80868b'
sidebar-selected-icon-color: '#d93025'
sidebar-selected-background-color: '#fce8e6'
mdc-theme-secondary: 'var(-primary-color)'
#Slider
slider-color: '#d93025'
slider-bar-color: '#fce8e6'
#Background
secondary-background-color: '#EFEFEF'
primary-background-color: '#EFEFEF'
#Custom header
couleur-header: 239, 239, 239
couleur-elements: 33, 33, 33
#Header
app-header-text-color: '#434343'
app-header-background-color: '#EFEFEF'
paper-tabs-selection-bar-color: '#434343'
# Journal
state-icon-color: '#434343'
# Enlever le header
card-mod-theme: light_mobile
card-mod-root: |
app-toolbar {
display: none;
}
I get error:
Invalid config for [frontend]: expected a dictionary for dictionary value @ data['frontend']['themes']['accent-color']. Got '#ff8100'
expected a dictionary for dictionary value @ data['frontend']['themes']['app-header-background-color']. Got '#EFEFEF'
expected a dictionary for dictionary value @ data['frontend']['themes']['app-header-text-color']. Got '#434343'
expected a dictionary for dictionary value @ data['frontend']['themes']['border-color']. Got '#EAEAEA'
expected a dictionary for dictionary value @ data['frontend']['themes']['border-radius']. Got '20px'
expected a dictionary for dictionary value @ data['frontend']['themes']['box-shadow']. Got '0px 2px 4px 0px rgba(0,0,0,0.16)'
expected a dictionary for dictionary value @ data['frontend']['themes']['card-background-color']. Got '#FAFAFA'
expected a dictionary for dictionary value @ data['frontend']['themes']['card-mod-root']. Got 'app-toolbar {\n display: none;\n}'
expected a dictionary for dictionary value @ data['frontend']['themes']['card-mod-theme']. Got 'light_mobile'
expected a dictionary for dictionary value @ data['frontend']['themes']['couleur-bleu']. Got '61, 90, 254'
expected a dictionary for dictionary value @ data['frontend']['themes']['couleur-elements']. Got '33, 33, 33'
expected a dictionary for dictionary value @ data['frontend']['themes']['couleur-gris']. Got '187, 187, 187'
expected a dictionary for dictionary value @ data['frontend']['themes']['couleur-header']. Got '239, 239, 239'
expected a dictionary for dictionary value @ data['frontend']['themes']['couleur-jaune']. Got '255, 145, 1'
expected a dictionary for dictionary value @ data['frontend']['themes']['couleur-rose']. Got '233, 30, 99'
expected a dictionary for dictionary value @ data['frontend']['themes']['couleur-rouge']. Got '245, 68, 54'
expected a dictionary for dictionary value @ data['frontend']['themes']['couleur-theme']. Got '51,51,51'
expected a dictionary for dictionary value @ data['frontend']['themes']['couleur-vert']. Got '1, 200, 82'
expected a dictionary for dictionary value @ data['frontend']['themes']['couleur-violet']. Got '102, 31, 255'
expected a dictionary for dictionary value @ data['frontend']['themes']['google-blue-500']. Got '#3D5AFE'
expected a dictionary for dictionary value @ data['frontend']['themes']['google-green-500']. Got '#01C852'
expected a dictionary for dictionary value @ data['frontend']['themes']['google-grey-500']. Got '#BBBBBB'
expected a dictionary for dictionary value @ data['frontend']['themes']['google-red-500']. Got '#F54436'
expected a dictionary for dictionary value @ data['frontend']['themes']['google-violet-500']. Got '#661FFF'
expected a dictionary for dictionary value @ data['frontend']['themes']['google-yellow-500']. Got '#FF9101'
expected a dictionary for dictionary value @ data['frontend']['themes']['light-primary-color']. Got '#fce8e6'
expected a dictionary for dictionary value @ data['frontend']['themes']['mdc-theme-secondary']. Got 'var(-primary-color)'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-item-icon-color']. Got '#434343'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-tabs-selection-bar-color']. Got '#434343'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-checked-bar-color']. Got '#3D5AFE'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-checked-button-color']. Got '#3D5AFE'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-checked-ink-color']. Got '#3D5AFE'
expected a dictionary for dictionary value @ data['frontend']['themes']['primary-background-color']. Got '#EFEFEF'
expected a dictionary for dictionary value @ data['frontend']['themes']['primary-color']. Got '#434343'
expected a dictionary for dictionary value @ data['frontend']['themes']['secondary-background-color']. Got '#EFEFEF'
expected a dictionary for dictionary value @ data['frontend']['themes']['sidebar-selected-background-color']. Got '#fce8e6'
expected a dictionary for dictionary value @ data['frontend']['themes']['sidebar-selected-icon-color']. Got '#d93025'
expected a dictionary for dictionary value @ data['frontend']['themes']['sidebar-selected-text-color']. Got '#d93025'
expected a dictionary for dictionary value @ data['frontend']['themes']['sidebar-text-color']. Got '#80868b'
expected a dictionary for dictionary value @ data['frontend']['themes']['slider-bar-color']. Got '#fce8e6'
expected a dictionary for dictionary value @ data['frontend']['themes']['slider-color']. Got '#d93025'
expected a dictionary for dictionary value @ data['frontend']['themes']['state-icon-color']. Got '#434343'
expected a dictionary for dictionary value @ data['frontend']['themes']['switch-checked-color']. Got '#3D5AFE'. (See /config/configuration.yaml, line 13).
Invalid config for [lovelace]: expected a list for dictionary value @ data['lovelace']['resources']. Got OrderedDict(). (See /config/configuration.yaml, line 9).
Answer to my question:
frontend:
themes:
minimalist: !include lovelace/themes/minimalist_theme.yaml
Another day, another card :
template:
- icon_info_bg
- personnes
- popup_map
type: custom:button-card
entity: person.clemalex
show_entity_picture: true
entity_picture: /local/images/person/clemalex.png
variables:
gps: google_maps #or 'waze' (open app on phone)
#les modèles (templates)
personnes:
show_label: true
label: |
[[[
if (entity.state == 'home'){
return "Domicile";
}
else if (entity.state == 'not_home'){
return "En Balade";
}else{
return entity.state; //dans une zone
}
]]]
styles:
entity_picture:
- transform: scale(2)
custom_fields:
notification:
- transform: scale(1.3)
- border-radius: 50%
- position: absolute
- right: 8px
- top: 8px
- height: 16px
- width: 16px
- border: 2px solid var(--card-background-color)
- font-size: 12px
- line-height: 14px
- background-color: |
[[[
if (entity.state == 'home'){
return "rgba(var(--couleur-bleu),1)";
}else{
return "rgba(var(--couleur-vert),1)";
}
]]]
custom_fields:
notification: |
[[[
var icon = "" ;
if (entity.state == 'home'){
icon="mdi:home-variant"
}else{
icon="mdi:pine-tree"
}
return `<ha-icon icon="${icon}" style="width: 10px; height: 10px; color: white;"></ha-icon>`
]]]
popup_map:
variables:
gps: google_maps
tap_action:
action: fire-dom-event
browser_mod:
command: call-service
service: browser_mod.popup
service_data:
deviceID:
- this
title: '[[[ return( "Position de " + entity.attributes.friendly_name); ]]]'
style:
$: |
.mdc-dialog {
backdrop-filter: blur(5px) !important;
-webkit-backdrop-filter: blur(5px) !important;
}
.: |
mwc-icon-button ha-icon {
font-size: 0;
}
.content{padding: 0 10px 10px 10px}
card:
type: vertical-stack
cards:
- template:
- map_card
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
- type: entities
show_header_toggle: false
entities:
- type: weblink
name: |
[[[
if (variables.gps.toUpperCase() == 'GOOGLE_MAPS'){
var gps = "(via Google Maps)"
}
else if (variables.gps.toUpperCase() == 'WAZE'){
var gps = "(via Waze)"
}
return('ItinĂŠraire vers ' + entity.attributes.friendly_name + ' ' + gps);
]]]
icon: mdi:map-marker-path
url: |
[[[
if (variables.gps.toUpperCase() == 'GOOGLE_MAPS'){
return('https://maps.google.com/maps?q='+entity.attributes.latitude+','+entity.attributes.longitude+'&t=&z=15');
}
else if (variables.gps.toUpperCase() == 'WAZE'){
return('waze://?ll='+entity.attributes.latitude+','+entity.attributes.longitude+'&z=15&navigate=yes');
}
]]]
map_card:
show_name: false
show_icon: false
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
type: iframe
url: |-
[[[
var lat = entity.attributes.latitude
var long = entity.attributes.longitude
return `https://maps.google.com/maps?q=${lat},${long}&t=&z=13&ie=UTF8&iwloc=&output=embed`
]]]
aspect_ratio: 96%
#PrĂŠsent de base
icon_info_bg:
color: var(--google-grey-500)
show_icon: true
show_name: true
show_label: true
size: 20px
custom_fields:
notification: |
[[[
if (entity.state =='unavailable'){
return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: white;"></ha-icon>`
}
]]]
state:
- styles:
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 38px
- top: 8px
- height: 16px
- width: 16px
- border: 2px solid var(--card-background-color)
- font-size: 12px
- line-height: 14px
- background-color: |
[[[
return "rgba(var(--couleur-rouge),1)";
]]]
value: unavailable
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
icon:
- color: rgba(var(--couleur-theme),0.2)
img_cell:
- background-color: rgba(var(--couleur-theme),0.05)
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
label:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
state:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
5 Likes
Hello Thomas,
I tried your new light/dark themes.
Added
modes:
light:
!include mobile_light.yaml
dark:
!include mobile_dark.yaml
With light theme everything works as expected. But the theme didnât switch to dark if I change theme settings in Browser or HA companion app.
The dark theme by itself is working and looks great if I change the include mobile_light.yamlto mobile_dark.yaml. But automatic switching is not working.
Any hint what I could do to get automatic switching working?
Is there a reason you use the âlabelâ of the buttoncard to display the state, instead of using âstate_displayâ ?
For the simple on/off (outlet) button, this would mean the translation (âonâ / âoffâ) can be removed altogether.
Also: this would allow people to display the time the entity last changed (if they desire so)
1 Like
Iâm trying to utilise the swipe-card for some navigation, but the overflow: hidden it adds causes some problems with the drop shadows of the cards. Does anyone know any tricks with card-mod to try and rectify?
Why theme not working:
configuration.yaml:
frontend:
themes:
minimalist: !include lovelace/themes/minimalist_theme.yaml
minimalist_theme.yaml:
#Colors
google-red-500 : '#F54436'
google-green-500 : '#01C852'
google-yellow-500 : '#FF9101'
google-blue-500 : '#3D5AFE'
google-violet-500 : '#661FFF'
google-grey-500: '#BBBBBB'
couleur-red : 245, 68, 54
couleur-green : 1, 200, 82
couleur-yellow : 255, 145, 1
couleur-blue : 61, 90, 254
couleur-violet : 102, 31, 255
couleur-grey : 187, 187, 187
couleur-rose : 233, 30, 99
couleur-theme : 51,51,51
#Card
card-background-color: '#FAFAFA'
box-shadow: '0px 2px 4px 0px rgba(0,0,0,0.16)'
border-radius: '20px'
border-color: '#EAEAEA'
primary-color: '#434343'
light-primary-color: '#fce8e6'
paper-item-icon-color: '#434343'
paper-toggle-button-checked-ink-color: '#3D5AFE'
paper-toggle-button-checked-button-color: '#3D5AFE'
paper-toggle-button-checked-bar-color: '#3D5AFE'
accent-color: '#ff8100'
switch-checked-color: '#3D5AFE'
#Sidebar
sidebar-selected-text-color: '#d93025'
sidebar-text-color: '#80868b'
sidebar-selected-icon-color: '#d93025'
sidebar-selected-background-color: '#fce8e6'
mdc-theme-secondary: 'var(-primary-color)'
#Slider
slider-color: '#d93025'
slider-bar-color: '#fce8e6'
#Background
secondary-background-color: '#EFEFEF'
primary-background-color: '#EFEFEF'
#Custom header
couleur-header: 239, 239, 239
couleur-elements: 33, 33, 33
#Header
app-header-text-color: '#434343'
app-header-background-color: '#EFEFEF'
paper-tabs-selection-bar-color: '#434343'
#Journal
state-icon-color: '#434343'
#Remove header
card-mod-theme: light_mobile
card-mod-root: |
app-toolbar {
display: none;
}
I am using latest button_card:template and latest views .
@lpt2007 If youâre using the latest templates youâll have to update your theme variables.
google-red-500 â google-red
google-green-500 â google-green
google-yellow-500 â google-yellow
google-blue-500 â google-blue
google-violet-500 â google-violet
google-grey-500 â google-grey
couleur-rouge â color-red
couleur-vert â color-green
couleur-jaune â color-yellow
couleur-bleu â color-blue
couleur-violet â color-purple
couleur-gris â color-grey
couleur-rose â color-pink
couleur-theme â color-theme
Or download the latest version of the theme again from the github repo 
Ok. first of all thx for this great looking simple design. Iâm using HA for a few months and now i try to set this up onto an separate test HA environment.
Right now Iâm not sure how to use this correctly.
Example
battery indicator: âsensor.mi_schlafzimmer_batteriestatusâ
I want to use this design / button from your GitHub:
This is my code in the â\config\lovelace\views\ownsite.yamlâ:
- title: OWN
icon: 'mdi:snake'
path: own
cards:
- type: 'custom:button-card'
name: Test
template: title
- entity: sensor.mi_schlafzimmer_batteriestatus
template:
- icon_info_bg
- generic
type: 'custom:button-card'
and this is the output:
Iâm not sure how to handle the TEMPLATE code on your GitHub?
Thanks & Greeting
PS: Will this design work in the HA companion app?
Hi @flirtysanchez,
Iâm not really sure what your question is because it looks like it is working in your screenshot
@tben has his layout in a grid card, which could explain why your card is so wide:
You can also chance the Mi Schlafzimmer - Batteriestatus if you want by adding a custom label to your card:
entity: sensor.mi_schlafzimmer_batteriestatus
label: Battery
template:
- icon_info_bg
- generic
type: 'custom:button-card'
If there is anything else, Iâm happy to help.
PS: yes it will look exactly the same 
1 Like
Problem not switching themes between dark and light mode seems to be related to an error with modes keyword. Added an issue to GitHub.
Did anyone get the automatic switching of themes working?
Thx for the hints! Slowly things are moving in the right direction.
The label: battery doesnât work. It overwrites the battery %. The solution:
name: Battery
I just answered your Github issue.
mode without an âsâ is correct. Iâll take a look why the colors and borders arenât working. If you could provide a piece of code (eg. a place where it wonât work for you), that would be helpful. Ideally just post it in the Github issue.
Did you âactivateâ label by using show_label: true ?
Another day, another template
Modified the template for a homekit style look + quick toggles for the lights in each room.
Clicking on a room brings you to the details page of the room:
6 Likes
Can you share your configuration?