ent/profiles/assets/system-theme-background.svg";
    } else {
      let contentColor;
      if (!this.theme.contentColor) {
        let styles = window.getComputedStyle(document.body);
        contentColor = styles.getPropertyValue("background-color");
      }

      // For other themes, use the standard SVG with dynamic colors
      this.backgroundImg.src =
        "chrome://browser/content/profiles/assets/theme-selector-background.svg";
      this.backgroundImg.style.fill = this.theme.chromeColor;
      this.backgroundImg.style.stroke = this.theme.toolbarColor;
      this.imgHolder.style.backgroundColor =
        this.theme.contentColor ?? contentColor;
    }
  }

  updated() {
    super.updated();
    this.updateThemeImage();
  }

  render() {
    if (!this.theme) {
      return null;
    }

    // We're using the theme's `dataL10nId` to serve as a
    // unique ID to use with `aria-labelledby`.
    return html`<link
        rel="stylesheet"
        href="chrome://browser/content/profiles/profiles-theme-card.css"
      />
      <moz-card
        class="theme-card"
        data-l10n-id=${ifDefined(this.theme.dataL10nTitle)}
      >
        <div class="theme-content">
          <div class="img-holder" aria-hidden="true">
            <img alt="" />
          </div>
          <div
            class="theme-name"
            id=${this.theme.name}
            data-l10n-id=${ifDefined(this.theme.dataL10nId)}
          >
            ${this.theme.name}
          </div>
        </div>
      </moz-card>`;
  }
}

customElements.define("profiles-theme-card", ProfilesThemeCard);
PK