fix: redraw HeartbeatBar canvas on theme change & update empty beat color (#6435)

This commit is contained in:
Dorian Grasset
2025-11-28 18:40:33 +01:00
committed by GitHub
parent 9b92db9e65
commit 46b07953ad

View File

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