From 3773e66e3c2a8fbc6b4c2a46d3c11322154dd5fa Mon Sep 17 00:00:00 2001
From: Ashvin Jangid <142579833+ashvwinn@users.noreply.github.com>
Date: Sat, 13 Jun 2026 14:21:34 +0530
Subject: [PATCH] gh-14020: dynamically switch boosts window theme (gh-14156)

fixes: #14020
---
 src/zen/boosts/ZenBoostsEditor.mjs      | 32 ++++++++++++++++---------
 src/zen/spaces/ZenGradientGenerator.mjs |  1 +
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/zen/boosts/ZenBoostsEditor.mjs b/src/zen/boosts/ZenBoostsEditor.mjs
index b120ef25e..f67ad0fa3 100644
--- a/src/zen/boosts/ZenBoostsEditor.mjs
+++ b/src/zen/boosts/ZenBoostsEditor.mjs
@@ -18,6 +18,7 @@ export class nsZenBoostEditor {
     "zap-state-update",
     "selector-picker-state-update",
     "zen-boosts-active-change",
+    "zen-theme-change",
   ];
 
   /**
@@ -44,7 +45,6 @@ export class nsZenBoostEditor {
     this.lastDotSetPos = { x: 0, y: 0 };
     this.currentBoostData = null;
     this.boostInfo = null;
-    this.isDarkMode = this.openerWindow.gZenThemePicker.isDarkMode;
 
     this.killOtherEditorInstances();
 
@@ -53,10 +53,14 @@ export class nsZenBoostEditor {
     });
 
     this.init();
-    this.initColorScheme();
     this.initColorPicker();
     this.initFonts();
     this.loadBoost(domain);
+    this.updateColorScheme();
+  }
+
+  get isDarkMode() {
+    return this.openerWindow.gZenThemePicker.isDarkMode;
   }
 
   /**
@@ -195,17 +199,24 @@ export class nsZenBoostEditor {
       case "zen-boosts-active-change":
         this.editorWindow.close();
         break;
+      case "zen-theme-change":
+        this.updateColorScheme();
+        break;
     }
   }
 
   /**
-   * Initializes the color scheme of the editor window based on the current theme (dark or light mode)
+   * Updates the color scheme of the editor window based on the current theme (dark or light mode)
    */
-  initColorScheme() {
-    if (this.isDarkMode) {
-      this.doc.documentElement.style.colorScheme = "dark";
-    } else {
-      this.doc.documentElement.style.colorScheme = "light";
+  updateColorScheme() {
+    const colorScheme = this.isDarkMode ? "dark" : "light";
+    this.doc.documentElement.style.colorScheme = colorScheme;
+
+    if (this.codeEditorReady) {
+      const container = this.doc.getElementById("zen-boost-code-editor");
+      const editorEl =
+        container.querySelector("iframe").contentDocument.documentElement;
+      editorEl.className = "theme-" + colorScheme;
     }
   }
 
@@ -239,11 +250,10 @@ export class nsZenBoostEditor {
     editor.refresh();
     editor.on("change", this.onCodeEditorChange.bind(this));
 
-    const editorEl =
-      container.querySelector("iframe").contentDocument.documentElement;
-    editorEl.className = "theme-" + (this.isDarkMode ? "dark" : "light");
     this.editorWindow._editor = editor;
     this.codeEditorReady = true;
+
+    this.updateColorScheme();
   }
 
   /**
diff --git a/src/zen/spaces/ZenGradientGenerator.mjs b/src/zen/spaces/ZenGradientGenerator.mjs
index f93df4bdf..b73266457 100644
--- a/src/zen/spaces/ZenGradientGenerator.mjs
+++ b/src/zen/spaces/ZenGradientGenerator.mjs
@@ -177,6 +177,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
 
   handleDarkModeChange() {
     this.updateCurrentWorkspace();
+    Services.obs.notifyObservers(null, "zen-theme-change");
   }
 
   get isDarkMode() {