I am exploring the button-card HACS add-on. I have a working dashboard, but for 2 hours I’m trying to find the solution to force the background color to black. Tried several found solutions, no matter what I try the background color stays white.
I have 3 cards in the dashboard. I open the “Raw configuration editor”. I found solutions to use [primary-background-color: “#000000”] or [background-color: rgb(0,0,0)]. I don’t know if I use the code on the right line.
Code raw configuration editor:
button_card_templates:
container:
color_type: label-card
color: dimgray
styles:
background-color: black
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- background-color: rgba(0,0,0,0.3)
- margin: 0
- padding: 0.3em
kiosk_mode:
user_settings:
- users:
- john
hide_sidebar: true
- users:
- Testt
kiosk: true
ignore_entity_settings: true
views:
- title: Home
cards:
- type: custom:button-card
template: container
color: '#0000cc'
name: Climate
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
entity: climate.bedroom_airco
show_icon: true
show_state: true
state:
- value: 'off'
icon: mdi:air-conditioner
color: blue
styles:
icon:
- animation: null
- value: cool
icon: mdi:fan
color: yellow
styles:
icon:
- animation: rotating 2s linear infinite
- type: custom:button-card
icon: mdi:fan
spin: true
color: yellow
entity: switch.office_airco
show_icon: true
show_state: true
state:
- value: 'off'
icon: mdi:air-conditioner
color: blue
styles:
icon:
- animation: null
- value: 'on'
icon: mdi:fan
color: yellow
styles:
icon:
- animation: rotating 2s linear infinite
- type: custom:button-card
icon: mdi:fan
spin: true
color: yellow
entity: switch.guest_airco
show_icon: true
show_state: true
state:
- value: 'off'
icon: mdi:air-conditioner
color: blue
styles:
icon:
- animation: null
- value: 'on'
icon: mdi:fan
color: yellow
styles:
icon:
- animation: rotating 2s linear infinite
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: container
color: '#ffff00'
name: Upstairs
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- type: custom:button-card
color_type: icon
color: yellow
entity: light.living_room
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: icon
color: yellow
entity: light.dining_room
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: icon
color: yellow
entity: light.kitchen
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: icon
color: yellow
entity: light.porch
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: icon
color: yellow
entity: light.toilet
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
template: container
color: '#ffff00'
name: Downstairs
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: icon
color: yellow
entity: light.bedroom
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: icon
color: yellow
entity: light.office
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: icon
color: yellow
entity: light.guestroom
show_icon: true
show_state: true
state:
- value: 'off'
color: white
- type: custom:button-card
color_type: blank-card
Who can advise me in reaching my goal?
I don’t want to enable dark-mode of the HA app.