diff --git a/js/palette.js b/js/palette.js
index 14155023ee..a1873d2cab 100644
--- a/js/palette.js
+++ b/js/palette.js
@@ -83,6 +83,7 @@ class Palettes {
         this.dict = {};
         this.selectorButtonsOff = []; // Select between palettes
         this.selectorButtonsOn = []; // Select between palettes in their on state
+        this.selectorRows = []; // Store selector TR elements for state restoration
         this.buttons = {}; // The toolbar button for each palette.
         this.labels = {}; // The label for each button.
         this.pluginPalettes = []; // List of palettes not in multipalette list
@@ -135,6 +136,8 @@ class Palettes {
         }
 
         const tr = docById("palette").children[0].children[0].children[0].children[0];
+        // Store selector TR for state restoration after theme change
+        this.selectorRows[i] = tr;
         const td = tr.insertCell();
         td.width = 1.5 * this.cellSize;
         td.height = 1.5 * this.cellSize;
@@ -454,6 +457,9 @@ class Palettes {
                 </div>`;
             element.childNodes[0].style.border = `1px solid ${platformColor.selectorSelected}`;
             document.body.appendChild(element);
+
+            // Rebuild selector buttons with new theme colors
+            this.init_selectors();
         } catch (e) {
             console.error("Error clearing palettes:", e);
         }
diff --git a/js/themebox.js b/js/themebox.js
index 55def4521a..51621c596c 100644
--- a/js/themebox.js
+++ b/js/themebox.js
@@ -12,7 +12,7 @@
 //A dropdown for selecting theme
 
 /*
-   global _, platformColor
+   global _, platformColor, MULTIPALETTES
 */
 
 /* exported ThemeBox, themeConfigs */
@@ -201,11 +201,24 @@ class ThemeBox {
         // Refresh palette if it exists
         if (this.activity.palettes) {
             try {
-                // Update palette selector border color
-                const paletteElement = document.getElementById("palette");
-                if (paletteElement && paletteElement.childNodes[0]) {
-                    paletteElement.childNodes[0].style.border = `1px solid ${window.platformColor.selectorSelected}`;
-                }
+                // Convert palette NAME to group INDEX
+                // this.current stores palette NAME (e.g. "pitch")
+                // selectorRows[] is indexed by NUMBER (0, 1, 2)
+                const currentName = this.activity.palettes.current;
+                const currentIndex = MULTIPALETTES.findIndex(group => group.includes(currentName));
+
+                if (currentIndex === -1) return;
+
+                // Clear palette DOM and rebuild selectors with new theme colors
+                this.activity.palettes.clear();
+
+                // Restore selection using stored selector rows
+                const selectorRow = this.activity.palettes.selectorRows[currentIndex];
+                if (!selectorRow) return;
+
+                // Apply selection highlight and build category list (same as hover)
+                this.activity.palettes.showSelection(currentIndex, selectorRow);
+                this.activity.palettes.makePalettes(currentIndex);
             } catch (e) {
                 console.debug("Could not refresh palette:", e);
             }