Fix: Sidebar palette buttons not updating immediately on theme switch

[anshukaushik4700]

Description

This PR fixes an issue where the sidebar palette UI did not immediately reflect the selected theme when switching between Light and Dark modes.

Previously:

• Palette selector buttons (top icons) retained previous theme colors.
• Palette list rows (categories/search section) remained in old theme colors.
• The open PaletteBody panel did not update its background and border.
• Colors were only refreshed after hover or interaction.

This created visual inconsistency during theme switching

Root Cause

While platformColor was updated correctly during theme switching, the palette DOM elements were not explicitly refreshed. As a result, previously applied inline styles remained until a user interaction (e.g., hover) triggered a repaint.

Changes Made

• Added refreshPaletteColors() method.
• Updated:
  1. Selector buttons (thead td)
  2. Palette rows (tbody tr)
  3. Row label text color
  4. PaletteBody background and border

Ensured palette UI updates instantly after theme switch.

Recording

themechange_issue_solved.mp4

Testing

• Verified Light → Dark switch
• Verified Dark → Light switch
• No console errors observed

closes #5825

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[anshukaushik4700]

Hi @walterbender @omsuneri @vanshika2720 👋
This PR fixes the palette theme update issue.
All checks are passing.
Kindly review when possible. Thank you!

[Commanderk3]

Hello, @anshukaushik4700

I tested this and in my system the problem was not solved.

Tested on Chrome.

Screen.Recording.2026-02-20.151451.mp4

[anshukaushik4700]

Hi @Commanderk3 ,

I’ve been working on updating the Music Blocks to respond to theme changes. Here’s what I’ve tried so far:

1. Defined a refreshBlock function – I initially thought refreshing blocks would update their colors when switching themes, but it didn’t work as expected.

2. Updated themeConfigs and ThemeBox – I ensured all theme colors are defined, and added logic to applyThemeInstantly and refreshUIComponents. This successfully updates the canvas, blocks, and most UI elements.

Current Issue:
The top selector buttons in the palette (the small icons at the top) still do not fully update their color correctly when switching between light and dark themes. I’ve tried updating their backgroundColor and borderColor, but it doesn’t seem to reflect consistently.

I’ve been working on this for the past oneday but haven’t been able to find a complete solution. Could you please provide some guidance on how to fix the block color update properly?

Thank you so much for your help!