fix: redraw HeartbeatBar canvas on theme change & update empty beat color

[kurama]

…olor

❗ Important Announcements

Click here for more details:

⚠️ Please Note: We do not accept all types of pull requests, and we want to ensure we don’t waste your time. Before submitting, make sure you have read our pull request guidelines: Pull Request Rules

🚫 Please Avoid Unnecessary Pinging of Maintainers

We kindly ask you to refrain from pinging maintainers unless absolutely necessary. Pings are for critical/urgent pull requests that require immediate attention.

📋 Overview

What problem does this pull request address?

HeartbeatBar canvas didn't update when switching between light/dark themes, empty beats kept their previous color until a hover or new beat triggered a redraw. Also the colors wasn't the ones used before the update with canvas.

What features or functionality does this pull request introduce or enhance?

Added $root.theme watcher to trigger canvas redraw on theme change
Moved empty beat colors to CSS variable (--beat-empty-color) for proper theme support

• Relates to feat: optimize HeartbeatBar performance by replacing divs with Canvas based rendering #6407
• Resolves Found some issues in nightly2 #6430 (comment)

🛠️ Type of change

• 🐛 Bugfix (a non-breaking change that resolves an issue)
• ✨ New feature (a non-breaking change that adds new functionality)
• ⚠️ Breaking change (a fix or feature that alters existing functionality in a way that could cause issues)
• 🎨 User Interface (UI) updates
• 📄 New Documentation (addition of new documentation)
• 📄 Documentation Update (modification of existing documentation)
• 📄 Documentation Update Required (the change requires updates to related documentation)
• 🔧 Other (please specify):
  • Provide additional details here.

📄 Checklist

• 🔍 My code adheres to the style guidelines of this project.
• 🦿 I have indicated where (if any) I used an LLM for the contributions
• ✅ I ran ESLint and other code linters for modified files.
• 🛠️ I have reviewed and tested my code.
• 📝 I have commented my code, especially in hard-to-understand areas (e.g., using JSDoc for methods).
• ⚠️ My changes generate no new warnings.
• 🤖 My code needed automated testing. I have added them (this is an optional task).
• 📄 Documentation updates are included (if applicable).
• 🔒 I have considered potential security impacts and mitigated risks.
• 🧰 Dependency updates are listed and explained.
• 📚 I have read and understood the Pull Request guidelines.

📷 Screenshots or Visual Changes

• UI Modifications: Highlight any changes made to the user interface.
• Before & After: Include screenshots or comparisons (if applicable).

Before

• Light:

• Dark:

After

• Light:

• Dark:

Event	Before	After
UP
DOWN
Certificate-expiry
Testing

[Copilot]

Pull request overview

This PR fixes a theme synchronization issue where the HeartbeatBar canvas did not update when switching between light and dark themes, causing empty beats to retain their previous theme's colors until a hover or new beat event triggered a redraw.

Key Changes:

• Added a $root.theme watcher to trigger canvas redraw on theme changes
• Introduced --beat-empty-color CSS variable with theme-specific values (#f0f8ff for light, #848484 for dark)
• Refactored color retrieval to use both root and component-scoped styles for proper theme support

[CommanderStorm]

LGTM, thank you for this work and sorry for not spotting this beforehand.

As soon as the Copilot comment is resolved, we can merge.