From 46b07953ad2347a38d85123e20825cd1c4f89fe1 Mon Sep 17 00:00:00 2001
From: Dorian Grasset <doriangrasset@proton.me>
Date: Fri, 28 Nov 2025 18:40:33 +0100
Subject: [PATCH] fix: redraw HeartbeatBar canvas on theme change & update
 empty beat color (#6435)

---
 src/components/HeartbeatBar.vue | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index 4977d0b8b..55defd4e3 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -315,6 +315,13 @@ export default {
             });
         },
 
+        "$root.theme"() {
+            // Redraw canvas when theme changes (nextTick ensures .dark class is applied)
+            this.$nextTick(() => {
+                this.drawCanvas();
+            });
+        },
+
         hoveredBeatIndex() {
             this.drawCanvas();
         },
@@ -550,13 +557,14 @@ export default {
             const centerY = this.canvasHeight / 2;
 
             // Cache CSS colors once per redraw
-            const styles = getComputedStyle(document.documentElement);
+            const rootStyles = getComputedStyle(document.documentElement);
+            const canvasStyles = getComputedStyle(canvas.parentElement);
             const colors = {
-                empty: styles.getPropertyValue("--bs-body-bg") || "#f0f8ff",
-                down: styles.getPropertyValue("--bs-danger") || "#dc3545",
-                pending: styles.getPropertyValue("--bs-warning") || "#ffc107",
-                maintenance: styles.getPropertyValue("--maintenance") || "#1d4ed8",
-                up: styles.getPropertyValue("--bs-primary") || "#5cdd8b",
+                empty: canvasStyles.getPropertyValue("--beat-empty-color") || "#f0f8ff",
+                down: rootStyles.getPropertyValue("--bs-danger") || "#dc3545",
+                pending: rootStyles.getPropertyValue("--bs-warning") || "#ffc107",
+                maintenance: rootStyles.getPropertyValue("--maintenance") || "#1d4ed8",
+                up: rootStyles.getPropertyValue("--bs-primary") || "#5cdd8b",
             };
 
             // Draw each beat
@@ -815,6 +823,12 @@ export default {
 }
 
 .hp-bar-big {
+    --beat-empty-color: #f0f8ff;
+
+    .dark & {
+        --beat-empty-color: #848484;
+    }
+
     .heartbeat-canvas {
         display: block;
         cursor: pointer;