Mini-media-player: Specify colors on custom background

[Sholofly]

Hi,

Is it possible to change colors when a background is selected?
I really would like to do the same as when artwork cover is present.

[kalkih]

Hey, to which elements do you wanna change colors?

[Sholofly]

All text and icons. Just like the theme settings for when artwork cover is present..

[kalkih]

Sure, I could add a mini-media-player-base-color theme variable in the future which would apply to text & icons.

And there's a theme variable for setting accent color available already mini-media-player-accent-color.

[Sholofly]

Would be nice! Thanks in advance.

[mokshmridul]

Hi,

I have added the following lines to my "themes.yaml" file, but the card wont change colors to the background color. Could you please guide me on this matter.

mini-media-player-overlay-color: 'rgba(150, 150, 150, 0.1)'
mini-media-player-base-color: 'rgba(150, 150, 150, 0.1)'
mini-media-player-accent-color: 'rgba(150, 150, 150, 0.1)'

Thanks

[kalkih]

Hey,

mini-media-player-overlay-color: 'rgba(150, 150, 150, 0.1)'

This does nothing, unless you are using the option artwork: cover/full-cover and there's artwork present, see this example.

mini-media-player-base-color: 'rgba(150, 150, 150, 0.1)'

This doesn't do anything yet, it's not available until the next release. In the next version this variable will apply to text & icons similar to mini-media-player-overlay-base-color when artwork is present.

mini-media-player-accent-color: 'rgba(150, 150, 150, 0.1)'

This is the color of accented elements (progress bar or when using the power_state option e.g.)

[kalkih]

Text is by default based on the theme variable primary-text-color, accent color is based on accent-color and icons are based on paper-item-icon-color

[mokshmridul]

Hey

Thank you so much for the quick reply. I now understand this much better.

One question though, is there any plan of letting the card assume the color / background of the selected theme when the selected media player entity is not being used?

[kalkih]

You're most welcome,
I'm not exactly sure what you mean, the default colors are based on standard theme variables, similar to other cards.
Do you mean when you apply a custom background to the card the colors would adjust to be visible/based on the background, or what would the use-case be?

[mokshmridul]

Hey,

Maybe the image below will better demonstrate what im trying to convey.

The AC card is transparent, and it picks, both the theme colors and the background colors from the image. The media card however, doesnt pick up the background color, and hence is the odd one out on my lovelace page

https://i.imgur.com/a1hqo4X.png

[kalkih]

Oh, now I get what you mean.
I actually experienced this just recently, and made a commit to fix it https://github.com/kalkih/mini-media-player/commit/24453ec978266a59ba1f4cbd714bf3b5cbe6eb3b.
In the next version the card will apply ha-card-background (if set) as background, which should solve your issue!

[kalkih]

New version release will probably be tomorrow btw.

[mokshmridul]

That sounds perfect.

Thanks a ton man, for all your hard work :)

[kalkih]

New release available, theme variable mini-media-player-base-color was added, and the card now respects & applies the theme variable ha-card-background if it's set

[Sholofly]

 - type: custom:mini-media-player
   entity: media_player.chromecast
   artwork: cover
   background: "/local/backgrounds/gcc.jpg"
   mini-media-player-base-color: red
   mini-media-player-accent-color: red

Still gives me white font color. Is there someting i'm missing?
Installed via HACS. Latest version.

[kalkih]

Hey, those are theme variables and should be set in your theme.

Alternatively, you can use something like lovelace-card-mod and set them directly in the card config, just remember to put -- in front of the variable name though if you use that method.

[Krocko]

@kalkih Can you please tell me, why this option don‘t work?

      style: |
        ha-card {
           background: rgba(0,0,0,0.4);
        }

[kalkih]

Try setting !important after the rgba value.

[Krocko]

--ha-card-background: was the solution.

[gekomax]

--ha-card-background: was the solution.

Hi, how did you solve it?

This doesn't work:
style: | --ha-card-background: rgba(0, 151, 19, 0.1);

[Krocko]

Try the following:

style: |
  ha-card {
    --ha-card-background: rgba(0,151,19,0.1);
  }