That an excellent question @KTibow !
Yes, i’ve past the wrong URL, you only need to install yours 
https://github.com/KTibow/lovelace-light-soft-ui-theme/
Huge thanks for pointing me that error.
Just discovered this and trying to get it work. I want it to show the state of a sensor and act on the switch for that sensor. This is because i work with pushbuttons which dont remember state.
(Pushing is enabling the sensor).
So is it possible give my state part of the config a different entitiy?
If you declare a input_boolean object, and use automations with service call input_boolean.toggle, that don’t do the job?
Hey, you wanna share some code? I really love this setup, its perfect for me. 
Hi, I uploaded your interface following your repository, but as per attachment the Home assistant tells me that the card is not present. I state that if it refers to the Button Card or Card MOd or Soft UI they are all present on my system. Could the error refer to the fact that I have not changed entities?
Hi @claudiovillani58.
Did you copy the content of button_card_templates.yaml file to the main
On your main dashboard, on the left side, click on the 3 vertical dots > Panel Config > Edit Main Source Code
If should be something like this
Hello here I am again I took a few steps forward thanks to your suggestion now but I have this situation as you can see below what can it depend on?
Claudio, show us your first lines of lovelace yaml config
i hope i understood correctly i used your example attached in github. I am attaching the text file as I uploaded it to lovelace. All the tips reported in the github I have followed to the letter. Thanks for your patience
views:
- title: New
path: new
theme: Light Soft UI
badges: []
cards:
- type: vertical-stack
cards:
- content: |
# Garage
style:
.: |
ha-card {
--paper-card-background-color: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 24px;
font-weight: normal;
font-family: Helvetica;
letter-spacing: '-0.01em';
text-align: center;
}
type: markdown
- type: horizontal-stack
cards:
- entity: switch.switch_portao
name: Garage Door
template:
- main_style
- button
type: 'custom:button-card'
variables:
icon_on: 'mdi:garage-open'
icon_off: 'mdi:garage-variant'
message_on: Open
message_off: Close
color: var(--yellow)
- entity: switch.switch_luz_quintal
name: Outside Light
template:
- main_style
- button
type: 'custom:button-card'
variables:
icon_on: 'mdi:lighthouse-on'
icon_off: 'mdi:lighthouse'
message_on: 'On'
message_off: 'Off'
color: var(--yellow)
- type: horizontal-stack
cards:
- entity: switch.switch_luz_loja
name: Indoor Light
template:
- main_style
- button
type: 'custom:button-card'
variables:
icon_on: 'mdi:lightbulb-on-outline'
icon_off: 'mdi:lightbulb-off'
message_on: 'On'
message_off: 'Off'
color: var(--yellow)
- entity: sensor.temperatura_soutelo
name: Outside
template:
- main_style
- temperature
show_state: true
show_label: true
label: Temperature
type: 'custom:button-card'
variables:
sensor_name: |
[[[ return states['sensor.humidade_soutelo'].state; ]]]
- type: horizontal-stack
cards:
- entity: binary_sensor.movimento_garagem
name: Movement
template:
- main_style
- sensor
type: 'custom:button-card'
variables:
icon_on: 'mdi:motion-sensor'
icon_off: 'mdi:motion-sensor-off'
message_on: Detected!
message_off: 'Undetected '
color: var(--blue)
- entity: binary_sensor.fogo
name: Fire
template:
- main_style
- sensor
type: 'custom:button-card'
variables:
icon_on: 'mdi:fire-alert'
icon_off: 'mdi:cloud-off-outline'
message_on: Fire !!!
message_off: Smoke Free
color: var(--red)
- type: vertical-stack
cards:
- content: |
# Covers
style:
.: |
ha-card {
--paper-card-background-color: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 24px;
font-weight: normal;
font-family: Helvetica;
letter-spacing: '-0.01em';
text-align: center;
}
type: markdown
- type: horizontal-stack
cards:
- entity: cover.estore1
name: kitchen
icon: 'mdi:blinds'
template:
- main_style
- cover
type: 'custom:button-card'
- type: horizontal-stack
cards:
- entity: cover.estore2
name: Living<br/>Room 1
icon: 'mdi:blinds'
template:
- main_style
- cover
type: 'custom:button-card'
- entity: cover.estore3
name: Living<br/>Room 2
icon: 'mdi:blinds'
template:
- main_style
- cover
type: 'custom:button-card'
- type: horizontal-stack
cards:
- entity: cover.estore4
name: Father
icon: 'mdi:blinds'
template:
- main_style
- cover
type: 'custom:button-card'
- entity: cover.estore5
name: Mother
icon: 'mdi:blinds'
template:
- main_style
- cover
type: 'custom:button-card'
- type: horizontal-stack
cards:
- entity: cover.estore6
name: Isa
icon: 'mdi:blinds'
template:
- main_style
- cover
type: 'custom:button-card'
- entity: cover.estore7
name: John
icon: 'mdi:blinds'
template:
- main_style
- cover
type: 'custom:button-card'
- type: horizontal-stack
cards:
- entity: cover.estore8
name: Office
icon: 'mdi:blinds'
template:
- main_style
- cover
type: 'custom:button-card'
- entity: cover.estore9
name: Visiting<br/>Room
icon: 'mdi:blinds'
template:
- main_style
- cover
type: 'custom:button-card'
- type: horizontal-stack
cards:
- entity: cover.estore10
name: Grandmother
icon: 'mdi:blinds'
template:
- main_style
- cover
type: 'custom:button-card'
- type: vertical-stack
cards:
- content: |
# Water Controlls
style:
.: |
ha-card {
--paper-card-background-color: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 24px;
font-weight: normal;
font-family: Helvetica;
letter-spacing: '-0.01em';
text-align: center;
}
type: markdown
- type: horizontal-stack
cards:
- entity: input_boolean.input_b_agua_alterar
name: Automatic
template:
- main_style
- button
type: 'custom:button-card'
variables:
icon_on: 'mdi:arrow-decision-auto-outline'
icon_off: 'mdi:arrow-decision-auto-outline'
message_on: 'Yes'
message_off: 'No'
color: var(--yellow)
- entity: switch.switch_eletrov
name: Input
template:
- main_style
- button
type: 'custom:button-card'
variables:
icon_on: 'mdi:fountain'
icon_off: 'mdi:home-circle-outline'
message_on: Borehole
message_off: Main grid
color: var(--blue)
- type: horizontal-stack
cards:
- variables:
sensor_name: input_number.input_n_agua_dia_de_alterar
depends: input_boolean.input_b_agua_alterar
icon: 'mdi:calendar'
entity: input_number.input_n_agua_dia_de_alterar
name: Changing<br/>Day
template:
- main_style
- number
type: 'custom:button-card'
- type: vertical-stack
cards:
- content: |
# Corredor
style:
.: |
ha-card {
--paper-card-background-color: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 24px;
font-weight: normal;
font-family: Helvetica;
letter-spacing: '-0.01em';
text-align: center;
}
type: markdown
- type: horizontal-stack
cards:
- entity: switch.corredor_presenca
name: Presence<br/>Light
template:
- main_style
- button
type: 'custom:button-card'
variables:
icon_on: 'mdi:lightbulb-on-outline'
icon_off: 'mdi:lightbulb-off'
message_on: Ghosts away
message_off: 'Off'
color: var(--yellow)
- entity: sensor.temperatura_casa
name: Casa
template:
- main_style
- temperature
show_state: true
show_label: true
label: Termómetro
type: 'custom:button-card'
variables:
sensor_name: |
[[[ return states['sensor.humidade_casa'].state; ]]]
- cards:
- content: |
# Covers Automations
style:
.: |
ha-card {
--paper-card-background-color: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 24px;
font-weight: normal;
font-family: Helvetica;
letter-spacing: '-0.01em';
text-align: center;
}
type: markdown
- cards:
- entity: input_boolean.input_b_estores_abrir
name: Sunrise
template:
- main_style
- button
type: 'custom:button-card'
variables:
icon_on: 'mdi:weather-sunset-up'
icon_off: 'mdi:weather-sunset-up'
message_on: Open at sunrise
message_off: Do not open
color: var(--yellow)
- entity: input_boolean.input_b_estores_fechar
name: Sunset
template:
- main_style
- button
type: 'custom:button-card'
variables:
icon_on: 'mdi:weather-sunset-down'
icon_off: 'mdi:weather-sunset-down'
message_on: Close at Sunset
message_off: Do not Close
color: var(--blue)
type: horizontal-stack
- type: horizontal-stack
cards:
- variables:
sensor_name: input_datetime.input_dt_estores_abertura
depends: input_boolean.input_b_estores_abrir
icon: 'mdi:clock'
entity: input_datetime.input_dt_estores_abertura
name: Time to<br/>Open Covers
template:
- main_style
- time
type: 'custom:button-card'
- variables:
sensor_name: input_number.input_n_estores_offset_fecho
depends: input_boolean.input_b_estores_fechar
icon: 'mdi:ruler-square-compass'
entity: input_number.input_n_estores_offset_fecho
name: Sun height<br/>to close
template:
- main_style
- number
type: 'custom:button-card'
type: vertical-stackNot a problem at all @claudiovillani58
There is your problem, you are missing some configurations.
If you go to my github, you will see a file called button_card_templates.yaml. That’s the file which contains all the css and script configurations.
You need to copy all content of that file to the file that you share with me,
At the end, this yaml lovelace file It should be something like this
button_card_templates:
main_style:
styles:
....
title: ....
views: ...
...
here is the file you are talking about that I have successfully uploaded to my home assistant and got it from your repository and it was updated for you about 8 days ago. In order not to make mistakes, I copied the RAW
button_card_templates:
main_style:
styles:
img_cell:
- padding-left: 25px
- padding-bottom: 15px
- justify-content: start
card:
- width: 'min(37vw, 170px)'
- height: 'min(35vw, 150px)'
- border-radius: 15px
- border-style: solid
- border-color: var(--primary-background-color)
- background-color: var(--primary-background-color)
- border-width: 2px
- margin: 3px 20px 3px 3px
- box-shadow: >
[[[ return '-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px
rgba(0, 0, 0, .09)' ]]]
- font-family: 'Google Sans, Roboto'
- font-weight: 500
name:
- justify-self: start
- font-size: 18px
- font-weight: 400
- align-self: center
- text-align: left
- padding-left: 15px
- opacity: 0.5
- color: var(--primary-text-color)
icon:
- color: var(--primary-icon-color)
- justify-self: start
- align-self: start
- opacity: 0.5
state:
- justify-self: start
- font-weight: normal
- font-size: 14px
- opacity: 0.6
- padding: 0 15px 5px
- color: var(--primary-text-color)
- opacity: 0.5
label:
- justify-self: start
- font-weight: normal
- font-size: 14px
- opacity: 0.6
- padding: 0 15px 5px
- color: var(--primary-text-color)
- opacity: 0.5
cover:
show_label: true;
show_state: false
variables:
sensor_name: ' '
label: |
[[[ return (states[entity.entity_id].attributes.current_position)+'%' ]]]
hold_action:
action: more-info
tap_action:
action: none
styles:
grid:
- grid-template-areas: '"i top" "i center" "n bottom" "l l"'
- grid-template-rows: 1fr 1fr 1fr min-content
- grid-template-columns: 2fr 1fr
custom_fields:
top:
card:
type: 'custom:button-card'
entity: null
icon: 'mdi:arrow-up-circle-outline'
template: botao2
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
bottom:
card:
type: 'custom:button-card'
entity: null
icon: 'mdi:arrow-down-circle-outline'
template: botao2
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
center:
card:
type: 'custom:button-card'
entity: null
icon: 'mdi:stop-circle-outline'
template: botao2
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
time:
variables:
sensor_name: ' '
depends: ' '
show_label: true;
show_state: false
state:
- styles:
card:
- border-width: 2px
- box-shadow: >
[[[ return 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px
3px 5px rgba(0, 0, 0, .08)' ]]]
- border-color: '#f7bf42'
icon:
- color: '#f7bf42'
- opacity: 1
name:
- color: '#e2ad37'
opacity: 1
label:
- color: '#e2ad37'
opacity: 1
value: |
[[[
if( variables.depends !== ' '){
if( states[variables.depends].state == 'on' )
return entity.state;
else
return "Fechado";
}
else
return "fechado";
]]]
label: |
[[[ return states[variables.sensor_name].state ]]]
hold_action:
action: none
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: '"i top" "i center" "n bottom" "l l"'
- grid-template-rows: 1fr 1fr 1fr min-content
- grid-template-columns: 2fr 1fr
number:
variables:
sensor_name: ' '
depends: ' '
show_label: true;
show_state: false
state:
- styles:
card:
- border-width: 2px
- box-shadow: >
[[[ return 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px
3px 5px rgba(0, 0, 0, .08)' ]]]
- border-color: '#f7bf42'
icon:
- color: '#f7bf42'
- opacity: 1
name:
- color: '#e2ad37'
opacity: 1
label:
- color: '#e2ad37'
opacity: 1
value: |
[[[
if( variables.depends !== ' '){
if( states[variables.depends].state == 'on' )
return entity.state;
else
return "Fechado";
}
else
return "fechado";
]]]
label: |
[[[ return Math.trunc(states[variables.sensor_name].state) ]]]
hold_action:
action: more-info
tap_action:
action: none
styles:
grid:
- grid-template-areas: '"i top" "i center" "n bottom" "l l"'
- grid-template-rows: 1fr 1fr 1fr min-content
- grid-template-columns: 2fr 1fr
custom_fields:
top:
card:
type: 'custom:button-card'
entity: null
icon: 'mdi:arrow-up-circle-outline'
template: botao2
tap_action:
action: call-service
service: input_number.increment
service_data:
entity_id: '[[[ return variables.sensor_name ]]]'
bottom:
card:
type: 'custom:button-card'
entity: null
icon: 'mdi:arrow-down-circle-outline'
template: botao2
tap_action:
action: call-service
service: input_number.decrement
service_data:
entity_id: '[[[ return variables.sensor_name ]]]'
botao_extendido:
state:
- value: 'on'
operator: ==
styles:
card:
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
: 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
]]]
icon:
- color: var(--paper-item-icon-active-color)
styles:
card:
- width: 80px
- height: 80px
- margin: 10px
- border-radius: 15px
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
: '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
]]]
- background-color: var(--primary-background-color)
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: medium
botao2:
size: 70%
show_icon: true
show_name: false
styles:
card:
- width: 30px
- height: 30px
- margin: 5px
- border-radius: 20px
- box-shadow: >
[[[ return '-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px
rgba(0, 0, 0, .03)'; ]]]
- background-color: var(--primary-background-color)
icon:
- color: '#b473f5'
opacity: 1
sensor:
variables:
icon_on: ' '
icon_off: ' '
message_on: ' '
message_off: ' '
color: ' '
size: 30%
hold_action:
action: more-info
show_label: true
show_state: false
state:
- value: 'on'
label: '[[[ return variables.message_on ]]]'
icon: '[[[ return variables.icon_on ]]]'
styles:
card:
- border-width: 2px
- box-shadow: >
[[[ return 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px
3px 5px rgba(0, 0, 0, .08)' ]]]
- border-color: '[[[ return variables.color ]]]'
icon:
- color: '[[[ return variables.color ]]]'
- opacity: 1
name:
- color: '[[[ return variables.color ]]]'
opacity: 1
label:
- color: '[[[ return variables.color ]]]'
opacity: 1
- value: 'off'
label: '[[[ return variables.message_off ]]]'
icon: '[[[ return variables.icon_off ]]]'
styles:
card:
- height: 'min(30vw, 90px)'
grid:
- grid-template-areas: '"n i" "n i" "l i" '
- grid-template-columns: 2fr 1fr
- grid-template-rows: 1fr 1fr 1fr
temperature:
size: 50%
variables:
sensor_name: ' '
state:
- value: 18
icon: 'mdi:thermometer-low'
operator: <
styles:
card:
- border-color: '#59bde2'
- color: '#59bde2'
- opacity: 1
icon:
- color: '#59bde2'
state:
- color: '#59bde2'
- value: 27
icon: 'mdi:thermometer'
operator: <
styles:
card:
- border-color: '#f79a0e'
- color: '#f79a0e'
- opacity: 1
icon:
- color: '#f79a0e'
state:
- color: '#f79a0e'
- value: 70
icon: 'mdi:thermometer-high'
operator: <
styles:
card:
- border-color: '#ec3967'
- color: '#ec3967'
- opacity: 1
icon:
- color: '#ec3967'
state:
- color: '#ec3967'
custom_fields:
teste: |
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 17px; height: 17px;">
</ha-icon>${variables.sensor_name}%`
]]]
styles:
custom_fields:
teste:
- justify-self: right
- font-weight: normal
- font-size: 16px
- opacity: 0.6
- padding-right: 5px
- padding-bottom: 20px
- color: var(--primary-text-color)
card:
- box-shadow: >
[[[ return 'inset -3px -3px 5px rgba(255, 255, 255, .65), inset 3px
3px 5px rgba(0, 0, 0, .2)' ]]]
icon:
- opacity: 1
grid:
- grid-template-areas: '"i s" "i teste" "n n" "l l"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr min-content min-content
state:
- font-size: 18px
- font-weight: 400
- justify-self: right
- opacity: 1
- padding-right: 5px
- align-self: flex-end
label:
- justify-self: start
- font-weight: normal
- font-size: 14px
- opacity: 0.6
- padding: 0 15px 5px
button:
size: 30%
tap_action:
action: toggle
hold_action:
action: more-info
styles:
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content min-content
variables:
icon_on: ' '
icon_off: ' '
message_on: ' '
message_off: ' '
color: ' '
show_label: true
show_state: false
state:
- value: 'on'
label: '[[[ return variables.message_on ]]]'
icon: '[[[ return variables.icon_on ]]]'
styles:
card:
- border-width: 2px
- box-shadow: >
[[[ return 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px
3px 5px rgba(0, 0, 0, .08)' ]]]
- border-color: '[[[ return variables.color ]]]'
icon:
- color: '[[[ return variables.color ]]]'
- opacity: 1
name:
- color: '[[[ return variables.color ]]]'
opacity: 1
label:
- color: '[[[ return variables.color ]]]'
opacity: 1
- value: 'off'
label: '[[[ return variables.message_off ]]]'
icon: '[[[ return variables.icon_off ]]]'
OK… and is not working yet?
It should…
Where did you place the file?
What is the raw config of your HA dashboard?
Hello
Thank you for this awesome theme, but i have a question. I only want to use the dark theme, but when i do, eveytime the sun is above the horizon i get a white shadow behind the buttons, i guess its for the light theme. Do anyone know what im suppose to change to get it to work with only dark mode, and remove the sun.sun theming.
Great and clean! Good work!
But, I seem to have missed something…
The spacing between all is huge… Looking at others UI there are different
Much more narrowed than mine…
Any ideas how to fix the spacing?
It’s the theme. You could just remove the block of code with “card-mod” in it. It’s not meant to be designed for horizontal stacks.
Would you like to beta test a simpler version of Dark Soft UI? By default it’s purple, but I can change it. The reason behind this is even I don’t understand all of the card-mod CSS in my themes, and also now it’s possible to globally apply the simplest styles:
# Example entry
style: |
ha-card {
background-color: var(--primary-background-color);
border-radius: 15px;
margin: 10px;
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03);
{% elif is_state('sun.sun', 'below_horizon') %}
-5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08);
{% endif %}
}
without using card-mod at all.
Here it is:
Dark:
# Backgrounds
primary-background-color: "#313238"
card-background-color: var(--primary-background-color)
paper-card-background-color: var(--primary-background-color)
secondary-background-color: var(--primary-background-color)
divider-color: var(--primary-background-color)
# Colors
primary-text-color: "#FFFFFF"
primary-color: "#6960EB"
# Cards
ha-card-border-radius: 15px
ha-card-box-shadow: -5px -5px 8px rgba(50, 50, 50, .2), 5px 5px 8px rgba(0, 0, 0, .08)
ha-card-inset-box-shadow: inset -5px -5px 8px rgba(50, 50, 50, .2), inset 5px 5px 8px rgba(0, 0, 0, .08)
masonry-view-card-margin: 20px
# Header
app-header-background-color: var(--primary-background-color)
app-header-text-color: var(--primary-text-color)
paper-tabs-selection-bar-color: var(--primary-text-color)
# Sidebar
sidebar-icon-color: var(--primary-text-color)
sidebar-text-color: var(--primary-text-color)
sidebar-selected-icon-color: var(--primary-color)
sidebar-selected-text-color: var(--primary-color)
sidebar-background-color: var(--primary-background-color)
sidebar-selected-background-color: var(--primary-background-color)
# More colors
success-color: "#60eb80"
accent-color: "#eb9560"
#paper-item-icon-active-color: "#ebe660"
#paper-item-icon-color: "#607eeb"
#state-color: var(--paper-item-icon-color)
label-badge-red: "#eb7360"
label-badge-blue: var(--success-color)
Thanks for your reply, ive tried to remove the card code but the the “button” dosnt inset when i click it. Its just a static button style.