jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 08:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use rgb theme variables for qrcode (#19726)

Browse Source
This commit is contained in:
Paul Bottein 2024-02-08 12:04:23 +01:00 committed by GitHub
parent abb014745a
commit b1e1b44c75
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/ha-qr-code.ts
View File

@ -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;