Possible theme error for media_player card

Configuration Frontend
1

Hi,

I’m new in this forum but am running home-assistant for about one year now.

I’ve just upgraded to version 2021.1.5 and spotted what seems to be an issue in the CSS code of the media_play card.

I’m using a custom theme (derived from ‘Google - Dark’) and noticed that I had a contrast issue between my definition of ‘primary-color’ and the ‘primary-background-color’.

I’ve changed ‘primary-color’ into a lighter value to solve this issue.

However, as a side effect, my media_player cards became lighter than the other cards in lovelace display.

I’ve investigated the html entities styling and noticed that ‘color-block’, ‘image’ and ‘no-img’ classes for the media_player card used the ‘primary-color’ value as background color whereas all the other cards seem to use the ‘ha-card-background’ color value.

The following patch seems to solve the issue:

[homeassistant@appart frontend_latest] diff -u  chunk.9a230f4e1ba6d82a8c78.js.ori chunk.9a230f4e1ba6d82a8c78.js
--- chunk.9a230f4e1ba6d82a8c78.js.ori	2021-01-24 22:07:08.808832410 +0100
+++ chunk.9a230f4e1ba6d82a8c78.js	2021-01-24 22:09:33.296293501 +0100
@@ -152,7 +152,7 @@
       }
 
       .color-block {
-        background-color: var(--primary-color);
+        background-color: var(--ha-card-background);
         transition: background-color 0.8s;
         width: 100%;
       }
@@ -161,7 +161,7 @@
         position: absolute;
         background-image: linear-gradient(
           to right,
-          var(--primary-color),
+          var(--ha-card-background),
           transparent
         );
         height: 100%;
@@ -171,7 +171,7 @@
       }
 
       .image {
-        background-color: var(--primary-color);
+        background-color: var(--ha-card-background);
         background-position: center;
         background-size: cover;
         background-repeat: no-repeat;
@@ -188,7 +188,7 @@
       }
 
       .no-img {
-        background-color: var(--primary-color);
+        background-color: var(--ha-card-background);
         background-size: initial;
         background-repeat: no-repeat;
         background-position: center center;

Could somebody let me know if my analysis makes sense and if it is worthy of opening an issue?

Thanks!

2

This change will not work for the default theme. ha-card-background is not even defined in default, but --card-background-color is used for normal cards.
Independent of that: The media card is using an inverted look, so --primary-color is the correct background color.

Did you test your change with the default theme?

3

Thanks for the answer,

and actually no, I did not test the default theme. I have now.
And thanks again, the suggestion was very insightful.
The change seems OK for Auto and Dark modes but is just “terrible” in Light mode.
I suppose I should just stick to the default dark mode and revert this nonsense :slight_smile:
Regards