Change color of a .shape according to dark and light themes

[Popoff-fr]

Hi,

Does anyone know how to change the color of an icon's .shape depending on dark or light themes?

I managed to make this change to the map background using @media (prefers-color-scheme: dark) and it works very well however I can't do it with the icon background.

here is my card code :

type: custom:mushroom-light-card
entity: light.lampes_salon
icon: mdi:lightbulb
fill_container: false
layout: horizontal
secondary_info: none
name: Salon
show_brightness_control: true
icon_color: orange
collapsible_controls: true
use_light_color: false
show_color_control: false
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
          background: white !important;
        --icon-symbol-size: 25px;
        --icon-size: 40px;}
    mushroom-state-info$: |
      .container {
       --card-primary-font-size: 22px;}
    .: |
      ha-card {
        border-radius: 50px;
        height: 57px !important;
        background-color: #E5E5E5;
        border: none;
      }
      @media (prefers-color-scheme: dark) {
        ha-card {background-color: #282828;}
      }

If anyone has any ideas, I'm all ears !
I don't want to go through the hassle of changing the theme colors.

[Popoff-fr]

I have the answer to my question! I'll post it in case it's helpful to anyone.

card_mod:
  style:
    mushroom-shape-icon$: |
      @media (prefers-color-scheme: dark) {
        .shape {
          background: red !important;
        }
      }

here is the final code of my card :

type: custom:mushroom-light-card
entity: light.lampes_salon
icon: mdi:lightbulb
fill_container: false
layout: horizontal
secondary_info: none
name: Salon
show_brightness_control: true
icon_color: orange
collapsible_controls: true
use_light_color: false
show_color_control: false
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
          background: white !important;
        --icon-symbol-size: 25px;
        --icon-size: 40px;}
      @media (prefers-color-scheme: dark) {
        .shape {
          background: #363636 !important;}}
    mushroom-state-info$: |
      .container {
       --card-primary-font-size: 22px;}
    .: |
      ha-card {
        border-radius: 50px;
        height: 57px !important;
        background-color: #E5E5E5;
        border: none;
      }
      @media (prefers-color-scheme: dark) {
        ha-card {background-color: #282828;}
      }