From f4b1d87d0d56b570a997d3991d1fd972d4b03677 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Thu, 8 Feb 2024 12:04:23 +0100
Subject: [PATCH] Use rgb theme variables for qrcode (#19726)

---
 src/components/ha-qr-code.ts | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/ha-qr-code.ts b/src/components/ha-qr-code.ts
index 47190c180c36..ce9109e1ed1a 100644
--- a/src/components/ha-qr-code.ts
+++ b/src/components/ha-qr-code.ts
@@ -2,6 +2,7 @@ import { LitElement, PropertyValues, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import QRCode from "qrcode";
 import "./ha-alert";
+import { rgb2hex } from "../common/color/convert-color";
 
 @customElement("ha-qr-code")
 export class HaQrCode extends LitElement {
@@ -65,6 +66,26 @@ export class HaQrCode extends LitElement {
         changedProperties.has("centerImage"))
     ) {
       const computedStyles = getComputedStyle(this);
+      const textRgb = computedStyles.getPropertyValue(
+        "--rgb-primary-text-color"
+      );
+      const backgroundRgb = computedStyles.getPropertyValue(
+        "--rgb-card-background-color"
+      );
+      const textHex = rgb2hex(
+        textRgb.split(",").map((a) => parseInt(a, 10)) as [
+          number,
+          number,
+          number,
+        ]
+      );
+      const backgroundHex = rgb2hex(
+        backgroundRgb.split(",").map((a) => parseInt(a, 10)) as [
+          number,
+          number,
+          number,
+        ]
+      );
 
       QRCode.toCanvas(canvas, this.data, {
         errorCorrectionLevel:
@@ -74,8 +95,8 @@ export class HaQrCode extends LitElement {
         margin: this.margin,
         maskPattern: this.maskPattern,
         color: {
-          light: computedStyles.getPropertyValue("--card-background-color"),
-          dark: computedStyles.getPropertyValue("--primary-text-color"),
+          light: backgroundHex,
+          dark: textHex,
         },
       }).catch((err) => {
         this._error = err.message;