I prefer the cleaner look without shadows.
I do like the buttons to float a bit, not as much have as big a shadow as you now suggest, but yes, floating them seems much more tactile.
using this myself:
- box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
on all buttons.
I must have seen a shortcut for that somewhere, something like shadow: elevation 6px, but cant seem to find it right now…
btw about dynamic icons and colors you mention in your video. Ive been doing that ever since I started with Ha, using customize and custom_ui.
using things like this in the customize_glob:
homeassistant:
customize_glob:
sensor.*_lux: #_motion_sensor
icon: mdi:theme-light-dark
templates:
icon_color: >
if (state < 1) return 'rgb(0,0,0)';
if (state < 2) return 'rgb(51,0,0)';
if (state < 10) return 'rgb(51,25,0)';
if (state < 50) return 'rgb(102,51,0)';
if (state < 150) return 'rgb(153,153,0)';
if (state < 350) return 'rgb(102,204,0)';
if (state < 700) return 'rgb(51,255,53)';
if (state < 2000) return 'rgb(102,255,178)';
if (state < 7000) return 'rgb(153,255,255)';
return 'rgb(204, 255, 229)';
unit_of_measurement: 'Lx'
or
device_tracker.*_bt:
show_last_changed: true
templates:
icon: >
if (state === 'home') return 'mdi:bluetooth';
return 'mdi:bluetooth-off';
icon_color: >
if (state === 'home') return 'blue';
return 'grey';
etc etc
makes the rest of your config so much cleaner. Simply use the entities in the Lovelace cards, without the need for extra templates there…
Yes, well I had hardcoded ‘mdi:’ in a lot of places which made using icon templates impossible. I have rewritten a lot of code so that it can accept these templates in my own config.
Actually the shadows under the buttons will become a selector like most theme element will be in my config in the future.
It will be something like this (this is what I am currently testing and it works pretty good)
might have been unprecise… seems the button card takes the templated icon in the backend in to account, but not the icon_color.
will ask @RomRider if this can be done, in the button-card topic
this is a good example:
sensor.cpu_temperature:
icon: mdi:thermometer
templates:
icon_color: >
if (state < 60) return 'green';
if (state < 65) return 'darkgreen';
if (state < 70) return 'orange';
if (state < 75) return 'crimson';
return 'firebrick';
Ah color I wouldn’t know, you can however use a color template within the button card. It is how I show different colors now.
sure, as we do indeed.
It would be so nice the button-card would respect the entity settings for icon and color already available in the system.
This diverges from your topic here though 
shall takeout to button-card.
@jimz011
hey quick question, i want to change your template button, your button changes the icon state when the value = on / off, based on that state the button lights up
i have button with state open / closed , so i copy pasted stuff and changed state to code below
it works, button lights up on state open/closed, but the mdi icon colors are not changing … what am i missing?
- value: "open"
'[[variable]]': '[[spin]]'
styles:
card:
- --ha-card-background: '[[on_card_color]]'
- opacity: '[[opacity_on]]'
name:
- color: '[[on_name_color]]'
state:
- color: '[[on_state_color]]'
lock:
- color: var(--lock-color-on)
label:
- color: '[[on_label_color]]'
- value: "closed"
'[[off_variable]]': '[[off_spin]]'
styles:
card:
- opacity: '[[opacity]]'
icon:
- color: '[[off_icon_color]]'
name:
- color: '[[off_name_color]]'
state:
- color: '[[off_state_color]]'
label:
- color: '[[off_label_color]]'
- font-size: '[[label_font_size]]'
- font-weight: '[[label_font_weight]]'
lock:
- color: var(--lock-color-off)
You should add
styles:
icon:
- color: yourcolorhere
to your template if you want this, but this will change that for all buttons that uses this state. Honestly you are better off using a color template i.e.
"[[[ if (entity.state < 20) return 'red'; if (entity.state >= 20 && entity.state < 80) return 'orange'; else return 'green'; ]]]"
Use this as the color variable in your decluttering-card. If I am correct this was already templated into the config so you shouldn’t have to change anything.
so it should look like:
- type: custom:decluttering-card
template: button
variables:
- color: "[[[ if (entity.state < 20) return 'red'; if (entity.state >= 20 && entity.state < 80) return 'orange'; else return 'green'; ]]]"
been trying to find it in your GitHub, but no such luck could you please point me to it? Id love to try and see if your code works for my HA setup also, without compromising performance.
It is not yet available on my repo. A few more days and I will post the update here.
Hello HA community, a little update: HKI 0.13.0 will be released within 36 hours! Prepare your schedules as this update will take up a bit of your time. With some exciting new features on the way.
Thank you for your patience!
1 Like
Hi @jimz011
Amazing view!!!
Can you please help, can you please tell me what is the 3 colors below picture, and also share the background.
i tried looking and didn’t found.
All cards use the same color with the exception of notifications (number 4). They are a linear gradient with color rgb(100,100,100).
They are currently not available on my repo but they will be within 36 hours.
As a sidenote: the wallpaper is already on my repo! You can find them in the www/images folder
1 Like
Thank you @jimz011 , and the text color of number 3 in the picture?
the entities colors climate, light etc, can you please tell what is the color?
It is called: AliceBlue
You can find most of the colors I use in the following folder on my repo
configuration/themes/theme-name.yaml
1 Like
It would be helpful if you’d share your code 
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: button-template
variables:
- entity: light.living_room_one
- name: One
- icon: mdi:sofa
- color: auto
- size: 30%
- label: !include lovelace/includes/brightness-label.yaml
- grid:
!include lovelace/includes/light-devices-grid.yaml
# This is the brightness label used on light entities.
# With this template it will only show a label whenever
# a light is 'on'. It will not display a label when a
# light is 'off'.
#### #### #### #### #### #### #### #### #### #### #### #
# Card Config
# Do NOT change this unless you know what you are doing!
"[[[ if (typeof(entity) === 'undefined') return; if ('brightness' in entity.attributes) { if (entity.attributes && (entity.attributes.brightness <= 255)) { var bri = Math.round(entity.attributes.brightness / 2.55); return (bri ? bri : '0') + '%'; } } ]]]"
I did not change anything. As far as I know I just copy and paste unless I am missing some kind of custom-card.
If you did copy it exactly without changing, could you look at which version of button-card you have? If you run an old version it doesn’t work as templating within the button-card has changed a while back.
Edit: Make sure the light has a brightness value. If it doesn’t have it (e.g. it can only switch on/off) then you can not use that label on that specific light. You will need to omit the label variable if it does not have a brightness value.