mirror of
https://github.com/louislam/uptime-kuma.git
synced 2025-12-05 01:10:52 +00:00
fix: redraw HeartbeatBar canvas on theme change & update empty beat color (#6435)
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user