Media Card: Colors more integrated with Art (#5105)

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -509,26 +509,47 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       .quality(1)
       .getPalette()
       .then((palette: Palette) => {
-        if (!palette.DarkMuted) {
+        const paletteColors: any[] = [];
+
+        Object.keys(palette).forEach((color) => {
+          paletteColors.push({
+            hex: palette[color]!.getHex(),
+            rgb: palette[color]!.getRgb(),
+            textColor: palette[color]!.getBodyTextColor(),
+            population: palette[color]!.getPopulation(),
+          });
+        });
+
+        if (!paletteColors.length) {
           this._foregroundColor = undefined;
           this._backgroundColor = undefined;
           return;
         }
 
-        this._backgroundColor = palette.DarkMuted.getHex();
+        paletteColors.sort((colorA, colorB) => {
-
+          if (colorA.population > colorB.population) {
-        if (
+            return -1;
-          !palette.Vibrant ||
+          }
-          getContrastRatio(
+          if (colorA.population < colorB.population) {
-            palette.Vibrant.getRgb(),
+            return 1;
-            palette.DarkMuted.getRgb()
-          ) < CONTRAST_RATIO
-        ) {
-          this._foregroundColor = palette.DarkMuted.getBodyTextColor();
-          return;
           }
 
-        this._foregroundColor = palette.Vibrant.getHex();
+          return 0;
+        });
+
+        this._backgroundColor = paletteColors[0].hex;
+
+        for (let i = 1; i < paletteColors.length; i++) {
+          if (
+            getContrastRatio(paletteColors[0].rgb, paletteColors[i].rgb) >=
+            CONTRAST_RATIO
+          ) {
+            this._foregroundColor = paletteColors[i].hex;
+            return;
+          }
+        }
+
+        this._foregroundColor = paletteColors[0].textColor;
       })
       .catch((err: any) => {
         // tslint:disable-next-line:no-console