Color each button individually.

[tamet83]

Hello,

I'm trying to solve this little problem. I have a card for my sonos Beam and I'd like to use the extra function for speech enhancement and night sound.

This is my card aspect:

And the related code:

 - type: vertical-stack
    cards:
      - type: custom:mini-media-player
        entity: media_player.salotto
        artwork: cover
        name: Salotto
        icon: mdi:soundbar
        icon_state: true
        volume_stateless: false
        volume_step: 5
        sound_mode: full
        hide:
          power_state: false
          controls: false
        shortcuts:
          columns: 2
          buttons:
            - name: Dialoghi
              icon: mdi:account-voice
              type: service
              id: switch.toggle
              data:
                entity_id: switch.sonos_salotto_speech_enhancement
            - name: Notte
              icon: mdi:weather-night
              type: service
              id: switch.toggle
              data:
                entity_id: switch.sonos_salotto_night_sound

I tried to use the --mini-media-player-button-color but I noticed it works on all buttons. I also tried to use this part of code:

            card_mod:
                style: |
                  :host {
                    --mini-media-player-button-color: #2879ae
                      {% if is_state('switch.sonos_salotto_speech_enhancement', 'on') %} #2879ae 
                      {% else %} grey {% endif %};
                    }

Does anyone have some advice to get that button colored?

Many thanks

[JGKarlin]

Were you able to solve this? I'm also looking to do the same.

[jimbobcraig]

BUMP! did anyone get anywhere with this? I'd also like to change button colour individually.