How can I change the color of the Mini Media Player slider?

im using mini-media-player, with card-mod extension. i really need help to change the orange color on the slider

Here is the list of mini media media player variables, that you can change via theme file:

  # Mini Media Player
  mini-media-player-base-color: var(--primary-text-color)
  mini-media-player-accent-color: var(--cyan-text)
  mini-media-player-icon-color: var(--mini-media-player-base-color)
  mini-media-player-button-color: rgba(255,255,255,0.25)
  mini-media-player-overlay-color: rgba(0,0,0,0.5)
  mini-media-player-overlay-color-stop: 25%
  mini-media-player-overlay-base-color: white
  mini-media-player-overlay-accent-color: white
  mini-media-player-media-cover-info-color: white
  mini-media-player-background-opacity: 0
  mini-media-player-artwork-opacity: 1
  mini-media-player-progress-height: 6px
  mini-media-player-scale: 1
  mini-media-player-name-font-weight: 400

Slider is not explicitly mentioned here :frowning: Perhaps you can experiment…
I believe it might be one of colors that in example above are set to white.

I will give it a try. thank you so much ! :slight_smile:

I tried setting up in themes config and changed the yaml. still no luck

Turned out this fixed the issue.

Check out this thread for adjusting most of mini-media-player via card_mod.

2 Likes

thank you so much, exactly what i was looking for :slight_smile:

I’m trying to change the slider knob, i tried several ways but no luck.

Try this and ensure you are using card_mod v3.4.4

card_mod:
  style: |
    ha-card {
      --md-slider-inactive-track-color: #8a8a8a;
      --md-slider-active-track-color: #30e48c;
        --md-slider-handle-color:#107b47;
    }

Its just the width and height of the knob im looking for to adjust

This is one method

card_mod:
  style:
    mmp-media-controls  $: |
      .mmp-media-controls__volume.flex ha-slider {
            --_handle-height: 20px !important;
            --_handle-width: 30px !important;
            }
    .: |
     :host {
       --mini-media-player-accent-color: #30e48c !important;
       }

I’d mark this thread as Solved and move future card_mod questions to this thread. We are getting off the original topic of
How can I change the color of the Mini Media Player slider?