Request darktheme optimized brand images if dark theme is used (#9777)

src/dialogs/config-flow/step-flow-pick-flow.ts

@@ -41,7 +41,12 @@ class StepFlowPickFlow extends LitElement {
             <img
               slot="item-icon"
               loading="lazy"
-              src=${brandsUrl(flow.handler, "icon", true)}
+              src=${brandsUrl({
+                domain: flow.handler,
+                type: "icon",
+                useFallback: true,
+                darkOptimized: this.hass.selectedTheme?.dark,
+              })}
               referrerpolicy="no-referrer"
             />
 

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -96,7 +96,12 @@ class StepFlowPickHandler extends LitElement {
                     <img
                       slot="item-icon"
                       loading="lazy"
-                      src=${brandsUrl(handler.slug, "icon", true)}
+                      src=${brandsUrl({
+                        domain: handler.slug,
+                        type: "icon",
+                        useFallback: true,
+                        darkOptimized: this.hass.selectedTheme?.dark,
+                      })}
                       referrerpolicy="no-referrer"
                     />
 

src/onboarding/integration-badge.ts

@@ -11,13 +11,19 @@ class IntegrationBadge extends LitElement {
 
   @property() public badgeIcon?: string;
 
+  @property({ type: Boolean }) public darkOptimizedIcon?: boolean;
+
   @property({ type: Boolean, reflect: true }) public clickable = false;
 
   protected render(): TemplateResult {
     return html`
       <div class="icon">
         <img
-          src=${brandsUrl(this.domain, "icon")}
+          src=${brandsUrl({
+            domain: this.domain,
+            type: "icon",
+            darkOptimized: this.darkOptimizedIcon,
+          })}
           referrerpolicy="no-referrer"
         />
         ${this.badgeIcon

src/onboarding/onboarding-integrations.ts

@@ -78,6 +78,7 @@ class OnboardingIntegrations extends LitElement {
               .domain=${entry.domain}
               .title=${title}
               badgeIcon="hass:check"
+              .darkOptimizedIcon=${this.hass.selectedTheme?.dark}
             ></integration-badge>
           `,
         ];
@@ -94,6 +95,7 @@ class OnboardingIntegrations extends LitElement {
                 clickable
                 .domain=${flow.handler}
                 .title=${title}
+                .darkOptimizedIcon=${this.hass.selectedTheme?.dark}
               ></integration-badge>
             </button>
           `,

src/panels/config/devices/ha-config-device-page.ts

@@ -241,7 +241,11 @@ export class HaConfigDevicePage extends LitElement {
                     integrations.length
                       ? html`
                           <img
-                            src=${brandsUrl(integrations[0], "logo")}
+                            src=${brandsUrl({
+                              domain: integrations[0],
+                              type: "logo",
+                              darkOptimized: this.hass.selectedTheme?.dark,
+                            })}
                             referrerpolicy="no-referrer"
                             @load=${this._onImageLoad}
                             @error=${this._onImageError}

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -34,6 +34,7 @@ import {
 } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
+import { brandsUrl } from "../../../../util/brands-url";
 import { documentationUrl } from "../../../../util/documentation-url";
 import {
   showEnergySettingsGridFlowFromDialog,
@@ -152,7 +153,11 @@ export class EnergyGridSettings extends LitElement {
             (entry) => html`<div class="row" .entry=${entry}>
               <img
                 referrerpolicy="no-referrer"
-                src="https://brands.home-assistant.io/co2signal/icon.png"
+                src=${brandsUrl({
+                  domain: "co2signal",
+                  type: "icon",
+                  darkOptimized: this.hass.selectedTheme?.dark,
+                })}
               />
               <span class="content">${entry.title}</span>
               <a href=${`/config/integrations#config_entry=${entry.entry_id}`}>
@@ -170,7 +175,11 @@ export class EnergyGridSettings extends LitElement {
                 <div class="row border-bottom">
                   <img
                     referrerpolicy="no-referrer"
-                    src="https://brands.home-assistant.io/co2signal/icon.png"
+                    src=${brandsUrl({
+                      domain: "co2signal",
+                      type: "icon",
+                      darkOptimized: this.hass.selectedTheme?.dark,
+                    })}
                   />
                   <mwc-button @click=${this._addCO2Sensor}>
                     Add CO2 signal integration

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -21,6 +21,7 @@ import "../../../../components/entity/ha-entity-picker";
 import type { HaRadio } from "../../../../components/ha-radio";
 import { showConfigFlowDialog } from "../../../../dialogs/config-flow/show-dialog-config-flow";
 import { ConfigEntry, getConfigEntries } from "../../../../data/config_entries";
+import { brandsUrl } from "../../../../util/brands-url";
 
 const energyUnits = ["kWh"];
 
@@ -117,7 +118,11 @@ export class DialogEnergySolarSettings
                     <img
                       referrerpolicy="no-referrer"
                       style="height: 24px; margin-right: 16px;"
-                      src="https://brands.home-assistant.io/forecast_solar/icon.png"
+                      src=${brandsUrl({
+                        domain: "forecast_solar",
+                        type: "icon",
+                        darkOptimized: this.hass.selectedTheme?.dark,
+                      })}
                     />${entry.title}
                   </div>`}
                 >

src/panels/config/info/integrations-card.ts

@@ -94,7 +94,12 @@ class IntegrationsCard extends LitElement {
                     <td>
                       <img
                         loading="lazy"
-                        src=${brandsUrl(domain, "icon", true)}
+                        src=${brandsUrl({
+                          domain: domain,
+                          type: "icon",
+                          useFallback: true,
+                          darkOptimized: this.hass.selectedTheme?.dark,
+                        })}
                         referrerpolicy="no-referrer"
                       />
                     </td>

src/panels/config/integrations/ha-integration-header.ts

@@ -78,7 +78,11 @@ export class HaIntegrationHeader extends LitElement {
       <slot name="above-header"></slot>
       <div class="header">
         <img
-          src=${brandsUrl(this.domain, "icon")}
+          src=${brandsUrl({
+            domain: this.domain,
+            type: "icon",
+            darkOptimized: this.hass.selectedTheme?.dark,
+          })}
           referrerpolicy="no-referrer"
           @error=${this._onImageError}
           @load=${this._onImageLoad}

src/util/brands-url.ts

@@ -1,8 +1,11 @@
-export const brandsUrl = (
+export interface BrandsOptions {
-  domain: string,
+  domain: string;
-  type: "icon" | "logo",
+  type: "icon" | "logo" | "icon@2x" | "logo@2x";
-  useFallback?: boolean
+  useFallback?: boolean;
-): string =>
+  darkOptimized?: boolean;
-  `https://brands.home-assistant.io/${
+}
-    useFallback ? "_/" : ""
+
-  }${domain}/${type}.png`;
+export const brandsUrl = (options: BrandsOptions): string =>
+  `https://brands.home-assistant.io/${options.useFallback ? "_/" : ""}${
+    options.domain
+  }/${options.darkOptimized ? "dark_" : ""}${options.type}.png`;

test-mocha/util/generate-brands-url-spec.ts

@@ -1,33 +1,41 @@
 import { assert } from "chai";
 import { brandsUrl } from "../../src/util/brands-url";
 
-describe("Generate brands Url", function () {
+describe("Generate brands Url", () => {
-  it("Generate logo brands url for cloud component without fallback", function () {
+  it("Generate logo brands url for cloud component without fallback", () => {
     assert.strictEqual(
       // @ts-ignore
-      brandsUrl("cloud", "logo"),
+      brandsUrl({ domain: "cloud", type: "logo" }),
       "https://brands.home-assistant.io/cloud/logo.png"
     );
   });
-  it("Generate icon brands url for cloud component without fallback", function () {
+  it("Generate icon brands url for cloud component without fallback", () => {
     assert.strictEqual(
       // @ts-ignore
-      brandsUrl("cloud", "icon"),
+      brandsUrl({ domain: "cloud", type: "icon" }),
       "https://brands.home-assistant.io/cloud/icon.png"
     );
   });
-  it("Generate logo brands url for cloud component with fallback", function () {
+  it("Generate logo brands url for cloud component with fallback", () => {
     assert.strictEqual(
       // @ts-ignore
-      brandsUrl("cloud", "logo", true),
+      brandsUrl({ domain: "cloud", type: "logo", useFallback: true }),
       "https://brands.home-assistant.io/_/cloud/logo.png"
     );
   });
-  it("Generate icon brands url for cloud component with fallback", function () {
+  it("Generate icon brands url for cloud component with fallback", () => {
     assert.strictEqual(
       // @ts-ignore
-      brandsUrl("cloud", "icon", true),
+      brandsUrl({ domain: "cloud", type: "icon", useFallback: true }),
       "https://brands.home-assistant.io/_/cloud/icon.png"
     );
   });
+
+  it("Generate dark theme optimized logo brands url for cloud component without fallback", () => {
+    assert.strictEqual(
+      // @ts-ignore
+      brandsUrl({ domain: "cloud", type: "logo", darkOptimized: true }),
+      "https://brands.home-assistant.io/cloud/dark_logo.png"
+    );
+  });
 });