How to have Black background in a Card

Configuration Frontend
1

The Card’s YAML Code;

type: entities
title: Our Room
state_color: true
entities:
  - entity: light.our_light
  - entity: light.our_light_extra
  - type: custom:fold-entity-row
    head: fan.our_fan
    entities:
      - type: custom:hui-element
        card_type: grid
        square: false
        columns: 3
        cards:
          - type: button
            name: Power
            icon: mdi:power
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_power
          - type: button
            name: Speed 1
            icon: mdi:fan-speed-1
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_speed_1
          - type: button
            name: Speed 2
            icon: mdi:fan-speed-2
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_speed_2
          - type: button
            name: Speed 3
            icon: mdi:fan-speed-3
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_speed_3
          - type: button
            name: Speed 4
            icon: mdi:speedometer-slow
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_speed_4
          - type: button
            name: Speed 5
            icon: mdi:speedometer-medium
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_speed_5
          - type: button
            name: Speed Boost
            icon: mdi:speedometer
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_speed_boost
          - type: button
            name: LED Toggle
            icon: mdi:led-outline
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_led_toggle
  - type: custom:multiple-entity-row
    entity: light.our_led
    name: Our LED
    toggle: true
    state_color: true
    entities:
      - entity: sensor.our_led_current
        name: Amps
        unit: A
      - entity: sensor.our_led_voltage
        name: Volts
        unit: V
      - entity: sensor.our_led_power
        name: Watts
        unit: W
  - type: custom:hui-element
    card_type: grid
    columns: 2
    square: false
    cards:
      - type: custom:button-card
        entity: binary_sensor.2f_door_our_room
        name: Door
        show_state: true
        tap_action:
          action: more-info
        styles:
          grid:
            - grid-template-areas: "\"i n s\""
            - grid-template-columns: 24px 1fr auto
          card:
            - height: 45px
            - box-shadow: none
            - background: none
            - border: 1px solid rgba(127, 127, 127, 0.2)
            - padding-left: 8px
            - padding-right: 8px
          img_cell:
            - justify-content: start
            - width: 24px
          name:
            - justify-self: start
            - padding-left: 10px
          state:
            - justify-self: end
            - padding-left: 5px
            - opacity: 0.7
          icon:
            - width: 24px
        state:
          - value: "on"
            styles:
              icon:
                - color: "var(--paper-item-icon-active-color, #ffc107)"
          - value: "off"
            styles:
              icon:
                - color: "var(--paper-item-icon-color, #44739e)"
      - type: custom:button-card
        entity: binary_sensor.2f_presense_our_room_occupancy
        name: Presence
        show_state: true
        tap_action:
          action: more-info
        styles:
          grid:
            - grid-template-areas: "\"i n s\""
            - grid-template-columns: 24px 1fr auto
          card:
            - height: 45px
            - box-shadow: none
            - background: none
            - border: 1px solid rgba(127, 127, 127, 0.2)
            - padding-left: 8px
            - padding-right: 8px
          img_cell:
            - justify-content: start
            - width: 24px
          name:
            - justify-self: start
            - padding-left: 10px
          state:
            - justify-self: end
            - padding-left: 5px
            - opacity: 0.7
          icon:
            - width: 24px
        state:
          - value: "on"
            styles:
              icon:
                - color: "var(--paper-item-icon-active-color, #ffc107)"
          - value: "off"
            styles:
              icon:
                - color: "#44739e"

Here is what it looks like

Untitled1
Untitled1914×667 26.6 KB

I want to have black background. And I want my card to look like below;

Untitled2
Untitled2914×667 30.1 KB

I am unable to change the background to black.

Can someone please help me do it?

2

If you have card-mod installed then it is easy, add css styling:

type: entities
title: Our Room
state_color: true
entities:
  - entity: light.mirek_ceiling
  - entity: light.mirek_desk_lamp
...
card_mod:
  style: |
    ha-card {
      background: black;
    }

T%his will make background of entities card black. For nested button card it might require to style card directly:

type: custom:button-card
styles:
  card:
    - background-color: transparent
3

Color should be transparent.
For the Grid card, use card-mod like it was proposed above.

4 
type: entities
title: Our Room
card_mod:
  style: |
    ha-card {
      background: black !important;
    }
state_color: true
entities:
  - entity: light.our_light
  - entity: light.our_light_extra
  - type: custom:fold-entity-row
    head: fan.our_fan
    entities:
      - type: custom:hui-element
        card_type: grid
        square: false
        columns: 3
        card_mod:
          style: |
            :host {
              --ha-card-background: black;
            }
        cards:
          - type: button
            name: Power
            icon: mdi:power
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_power
          - type: button
            name: Speed 1
            icon: mdi:fan-speed-1
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_speed_1
          - type: button
            name: Speed 2
            icon: mdi:fan-speed-2
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_speed_2
          - type: button
            name: Speed 3
            icon: mdi:fan-speed-3
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_speed_3
          - type: button
            name: Speed 4
            icon: mdi:speedometer-slow
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_speed_4
          - type: button
            name: Speed 5
            icon: mdi:speedometer-medium
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_speed_5
          - type: button
            name: Speed Boost
            icon: mdi:speedometer
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_speed_boost
          - type: button
            name: LED Toggle
            icon: mdi:led-outline
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: script.2f_our_fan_remote_led_toggle
  - type: custom:multiple-entity-row
    entity: light.our_led
    name: Our LED
    toggle: true
    state_color: true
    entities:
      - entity: sensor.our_led_voltage
        name: false
      - entity: sensor.our_led_current
        name: false
      - entity: sensor.our_led_power
        name: false
  - type: custom:hui-element
    card_type: grid
    columns: 2
    square: false
    cards:
      - type: custom:button-card
        entity: binary_sensor.2f_door_our_room
        name: Door
        show_state: true
        tap_action:
          action: more-info
        styles:
          grid:
            - grid-template-areas: "\"i n s\""
            - grid-template-columns: 24px 1fr auto
          card:
            - height: 45px
            - box-shadow: none
            - background: none
            - border: 1px solid rgba(127, 127, 127, 0.2)
            - padding-left: 8px
            - padding-right: 8px
          img_cell:
            - justify-content: start
            - width: 24px
          name:
            - justify-self: start
            - padding-left: 10px
          state:
            - justify-self: end
            - padding-left: 5px
            - opacity: 0.7
          icon:
            - width: 24px
        state:
          - value: "on"
            styles:
              icon:
                - color: "var(--paper-item-icon-active-color, #ffc107)"
          - value: "off"
            styles:
              icon:
                - color: "var(--paper-item-icon-color, #44739e)"
      - type: custom:button-card
        entity: binary_sensor.2f_presense_our_room_occupancy
        name: Presence
        show_state: true
        tap_action:
          action: more-info
        styles:
          grid:
            - grid-template-areas: "\"i n s\""
            - grid-template-columns: 24px 1fr auto
          card:
            - height: 45px
            - box-shadow: none
            - background: none
            - border: 1px solid rgba(127, 127, 127, 0.2)
            - padding-left: 8px
            - padding-right: 8px
          img_cell:
            - justify-content: start
            - width: 24px
          name:
            - justify-self: start
            - padding-left: 10px
          state:
            - justify-self: end
            - padding-left: 5px
            - opacity: 0.7
          icon:
            - width: 24px
        state:
          - value: "on"
            styles:
              icon:
                - color: "var(--paper-item-icon-active-color, #ffc107)"
          - value: "off"
            styles:
              icon:
                - color: "#44739e"

It worked