fix: theme to take effect on change to penpot

Author: Belar

src/base/scripts/electron-tabs.js

@@ -86,9 +86,7 @@ function tabReadyHandler(tab) {
   const webview = /** @type {WebviewTag} */ (tab.webview);
 
   tab.once("webview-dom-ready", () => {
-    tab.on("active", () => {
-      webview.send(THEME_TAB_EVENTS.REQUEST_UPDATE);
-    });
+    tab.on("active", () => requestTabTheme(tab));
   });
   tab.element.addEventListener("contextmenu", (event) => {
     event.preventDefault();
@@ -108,6 +106,26 @@ function tabReadyHandler(tab) {
   });
 }
 
+/**
+ * Calls a tab and requests a theme update send-out. 
+ * If no tab is provided, calls the active tab.
+ *  
+ * @param {Tab =} tab
+ */
+async function requestTabTheme(tab) {
+  tab = tab || (await getActiveTab());
+
+  if (tab) {
+    const webview = /** @type {WebviewTag} */ (tab.webview);
+    webview?.send(THEME_TAB_EVENTS.REQUEST_UPDATE);
+  }
+}
+
+async function getActiveTab() {
+  const tabGroup = await getTabGroup();
+  return tabGroup?.getActiveTab();
+}
+
 async function getTabGroup() {
   return /** @type {TabGroup | null} */ (
     await getIncludedElement("tab-group", "#include-tabs")

src/base/scripts/theme.js

@@ -40,9 +40,16 @@ async function prepareForm(themeSetting) {
     const value = target instanceof HTMLSelectElement && target.value;
 
     if (isThemeSetting(value)) {
-      currentThemeSetting = value;
+      const isTabTheme = value === "tab";
 
+      currentThemeSetting = value;
       localStorage.setItem(THEME_STORE_KEY, value);
+
+      if (isTabTheme) {
+        requestTabTheme();
+        return;
+      }
+
       setTheme(value);
     } else {
       currentThemeSetting = null;