From b7fdae8f6e308bba007bb51a4f1a724ea5ce2c34 Mon Sep 17 00:00:00 2001
From: Romain <58231487+gingerm0nkey@users.noreply.github.com>
Date: Sat, 19 Feb 2022 10:22:41 +0100
Subject: [PATCH 1/3] Create ISSUE.md

---
 ISSUE.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 ISSUE.md

diff --git a/ISSUE.md b/ISSUE.md
new file mode 100644
index 0000000..b690030
--- /dev/null
+++ b/ISSUE.md
@@ -0,0 +1,23 @@
+# Issue
+On recent releases of HA, I am facing an issue with the display of the gauge, using the default light or dark theme.
+
+Dark theme:
+
+![2022-02-19_094807](https://user-images.githubusercontent.com/58231487/154793886-12c5b1aa-4469-4a7c-9bb7-d7def5421959.png)
+
+Light theme:
+
+![2022-02-19_094830](https://user-images.githubusercontent.com/58231487/154793899-4fa37a60-bcf1-47cd-861e-22c0c1a4bb8a.png)
+
+
+With the style inspector of the browser, the variable `--paper-card-background-color` is not set in `.gauge-b`. Replacing this variable with `--card-background-color` fix the issue.
+
+![2022-02-19_101802](https://user-images.githubusercontent.com/58231487/154794766-c07842f9-9bde-4db3-869b-e15151171cb9.png)
+
+
+After:
+
+![2022-02-19_101859](https://user-images.githubusercontent.com/58231487/154794849-2f92f890-6f1f-4424-ab05-74d4d5b4f26e.png)
+![2022-02-19_101914](https://user-images.githubusercontent.com/58231487/154794851-75ca8ade-fa21-43d7-a59c-06abe5c18f3b.png)
+
+![2022-02-19_102007](https://user-images.githubusercontent.com/58231487/154794852-9e99d0f7-b324-48b7-959a-e55e7eaae87e.png)

From 4690a844d4c8da476158dd25e124a7d4833b3cfb Mon Sep 17 00:00:00 2001
From: Romain <58231487+gingerm0nkey@users.noreply.github.com>
Date: Sat, 19 Feb 2022 10:23:59 +0100
Subject: [PATCH 2/3] Fix display issue on recent release of HA

Fix display issue on recent release of HA with default light or dark theme. Variable `--paper-card-background-color`replaced with `--card-background-color` in `.gauge-b`
---
 gauge-card.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gauge-card.js b/gauge-card.js
index 814e985..1b84823 100644
--- a/gauge-card.js
+++ b/gauge-card.js
@@ -51,7 +51,7 @@ class GaugeCard extends HTMLElement {
       .gauge-b{
         z-index: 3;
         position: absolute;
-        background-color: var(--paper-card-background-color);
+        background-color: var(--card-background-color);
         width: calc(var(--base-unit) * 2.5);
         height: calc(var(--base-unit) * 1.25);
         top: calc(var(--base-unit) * 0.75);

From 8c482ec4b59806282cb9867c898e376dec1327e5 Mon Sep 17 00:00:00 2001
From: Romain <58231487+gingerm0nkey@users.noreply.github.com>
Date: Sat, 19 Feb 2022 10:26:22 +0100
Subject: [PATCH 3/3] Update README.md

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 487cd36..72255b9 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,9 @@
 # Gauge card
 
+**Please read ISSUE.md for the change i made to the code**
+
+[ISSUE.md](ISSUE.md)
+
 A simple gauge implemented in CSS based on https://github.com/JohnrBell/Gauge_CSS.
 
 ![gauge-card](https://user-images.githubusercontent.com/7738048/42317998-73070c5e-8056-11e8-8621-49c61b5b7be5.gif)