CARD-MOD unable to style entity background

HA 0.106.1
Trying to prevent the background of the selected entity to turn light blue in the example below.

I cannot find which element controls that color:

                  - type: glance                                    # LIGHT   ZONES  CARDS
                    style: |
                      ha-card {
                        color: white;
                        font-variant: small-caps;
                        border-right: 3px double grey;
                        border-bottom: 3px double grey;
                        border-left: 3px double grey;
                      }
                      .card-header {
                        font-size: 23px;
                        color: white;
                        text-align: center;
                        }
                    title: Light Zones
                    columns: 5
                    show_state: false
                    show_name: true
                    entities:
                      - entity: light.dining_room
                        style: |
                          :host {
                            primary-background-color: black;
                          }

I have tried many many styles elements. Any help is appreciated.
Erik

Not really possible to help as is, it is too much dependent of your(unknown) actual theme.

The theme used is the darkmix available in the community samples.

darkmix:
# Main colors
  primary-color: '#03A9F4'
  accent-color: 'red'
  dark-primary-color: 'var(--primary-color)'
  light-primary-color: 'var(--primary-color)'

# Text colors
  primary-text-color: 'white'
  text-primary-color: 'var(--primary-text-color)'
  secondary-text-color: 'silver'
  disabled-text-color: 'silver'
  label-badge-border-color: 'lime'

# Background colors
  primary-background-color: '#141A32'
  secondary-background-color: '#141A32'
  divider-color: 'var(--primary-color)'

# Table rows
  table-row-background-color: 'var(--primary-background-color)'
  table-row-alternative-background-color: 'var(--primary-background-color)'

# Nav Menu
  paper-listbox-color: 'var(--primary-color)'
  paper-listbox-background-color: 'var(--primary-background-color)'
  paper-grey-50: 'var(--primary-text-color)'
  sidebar-icon-color: 'var(--primary-color)'

# Paper card
  paper-card-header-color: 'var(--primary-color)'
  paper-card-background-color: "#1E2747"
  paper-dialog-background-color: 'var(--primary-background-color)'
  paper-item-icon-color: 'var(--primary-color)'
  paper-item-icon-active-color: 'lime'
  paper-item-icon_-_color: 'lime'
  paper-item-selected_-_background-color: '#282C34'
  paper-tabs-selection-bar-color: 'lime'

# Labels
  label-badge-red: 'var(--primary-color)'
  label-badge-text-color: 'var(--primary-text-color)'
  label-badge-background-color: 'var(--paper-card-background-color)'

# Switches
  paper-toggle-button-checked-button-color: 'var(--primary-color)'
  paper-toggle-button-checked-bar-color: 'var(--primary-color)'
  paper-toggle-button-checked-ink-color: 'var(--primary-color)'
  paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'

# Sliders
  paper-slider-knob-color: 'var(--primary-color)'
  paper-slider-knob-start-color: 'var(--primary-color)'
  paper-slider-pin-color: 'var(--primary-color)'
  paper-slider-active-color: 'var(--primary-color)'
  paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

# Google colors
  google-red-500: 'red'
  google-green-500: 'lime'

# Date picker
  lumo-primary-text-color: 'var(--primary-color)'
  lumo-body-text-color: 'var(--primary-color)'
  lumo-primary-color: 'var(--primary-color)'
  paper-grey-200: 'var(--paper-card-background-color)'

Sorry, i tried with your theme but i don’t reproduce your issue, no background at all for me on glance entities.

Thanks for testing. I have the same behavior on PC, Tablet and iPhone.
There must be a parameter that controls that color.


I have tried most of the variables seen in the inspector:

But I have tested them in the host section of the styles element:

                  - type: glance                                    # LIGHT   ZONES  CARDS
                    style: |
                      ha-card {
                        color: white;
                        font-variant: small-caps;
                        border-right: 3px double grey;
                        border-bottom: 3px double grey;
                        border-left: 3px double grey;
                      }
                      .card-header {
                        font-size: 23px;
                        color: white;
                        text-align: center;
                        }
                    title: Light Zones
                    columns: 5
                    show_state: false
                    show_name: true
                    entities:                                    
                      - entity: light.dining_room
                                                    # Test to identify styling variable
                        style: |
                          :host {
                            switch-checked-button-color red;   
                            }
                        name: Dining
                        icon: mdi:silverware

But still no cigar. Maybe there is another section in the style portion to add such as Div? Admittedly I am new to styling.

Erik

Try using correct syntax :
—switch-checked-button-color: red;

But i have no idea which one it could be.

Tip you can alter or disable those attribute values directly from the DOM inspector. It’s the quickest way to find the good one(s)

Great, so I found it. In the section of the Inspector called “inherited from div” it is the parameter – primary-color !!! Good start. unfortunately changing that value in the :host { section does not actually do anything. I tried as below and with leading --.

                                                    # Test to identify styling variable
                        style: |
                          :host {
                            primary-color: red;   
                            }

Erik