A few HA updates ago the light default color stopped working. Now after the release of today’s update 2023-03-02 the default light card color is working again.
However, in the custom button card the default color does not work anymore.
But alight color that is not default does work, i don’t know where to look or how to fix it
Someone can helpe me find a solution please?
Codes
lovelace light button template:
button_card_templates:
light_button:
aspect_ratio: 4/3
color_type: icon
hold_action:
action: more-info
haptic: selection
tap_action:
action: toggle
label: >
[[[ var bri = entity.attributes.brightness &&
Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : 'Aan'); else return "Uit"; ]]]
layout: icon_label
show_label: true
show_name: true
state:
- styles:
card:
- border: solid 1px var(--button-card-light-color)
- box-shadow: 0px 0px 6px 1px var(--button-card-light-color)
label:
- color: var(--button-card-light-color)
value: 'on'
- styles:
card:
- border: solid 1px var(--primary-color)
- box-shadow: none
value: 'off'
- icon: mdi:alert
label: Lost
styles:
card:
- border: 'solid 1px #7f7f7f'
- box-shadow: none
icon:
- color: '#ff0000'
- opacity: 0.4
label:
- color: '#7f7f7f'
name:
- color: '#7f7f7f'
value: unavailable
styles:
card:
- border-radius: 10px
- padding: 6px 6px 6px 6px
- margin: 0% 0% 0% 0%
- '--ha-card-background': rgba(0, 0, 0, 0)
grid:
- grid-template-areas: '"i l l" "n n n"'
- grid-template-rows: 45% auto
- grid-template-columns: 33% auto
icon:
- width: 30px
- padding: 0px 0px 0px 0px
- color: var(--button-card-light-color)
label:
- font-size: 14px
- justify-self: right
- padding: 0px 3px 0px 0px
- color: var(--secondary-text-color)
name:
- justify-self: middle
- align-self: end
- font-size: 14px
- padding: 0px 0px 2px 0px
- color: var(--primary-text-color)
- white-space: normal
light code:
type: custom:stack-in-card
mode: vertical
cards:
- type: entities
entities:
- type: divider
title: Woonkamer
icon: hue:room-living
style: |
ha-icon {
--mdc-icon-size: 29px;
}
ha-card {
box-shadow: none;
border: 0px;
--ha-card-border-width: 0px;
}
- type: horizontal-stack
cards:
- entities:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- entity: light.woonkamer
name: Alle Lampen
icon: hue:bulb-group-filament
type: custom:button-card
template: light_button
- entity: light.woonkamer_plafondlampen
name: Plafondlamp
icon: hue:ceiling-flourish-pendant
template: light_button
type: custom:button-card
- type: custom:gap-card
height: 5
- type: custom:gap-card
height: 5
type: entities
show_header_toggle: false
state_color: false
style: |
ha-card {
box-shadow: none;
border: 0px;
--ha-card-border-width: 0px;
}
- type: vertical-stack
cards:
- type: entities
entities:
- type: divider
- light.woonkamer
- type: custom:slider-entity-row
entity: light.woonkamer
name: Alle Lampen
icon: hue:bulb-group-filament
- type: custom:gap-card
height: 5
- type: custom:slider-entity-row
entity: light.woonkamer_plafondlampen
name: Plafondlamp
icon: hue:ceiling-flourish-pendant
- type: custom:gap-card
height: 5
style: |
ha-card {
box-shadow: none;
border: 0px;
--ha-card-border-width: 0px;
}
style: |
ha-card {
width: 100% !important;
margin: 0px 0px 0px -5px
}
Image of what is wrong:
