feat: add penpot theme option

Author: Belar

src/base/components/settings.html

@@ -17,6 +17,7 @@ <h2>Theme</h2>
                 <option value="light">Light</option>
                 <option value="dark">Dark</option>
                 <option value="system">System</option>
+                <option value="tab">Penpot</option>
             </select>
         </div>
     </div>

src/base/scripts/electron-tabs.js

@@ -85,10 +85,23 @@ async function prepareTabReloadButton() {
 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.element.addEventListener("contextmenu", (event) => {
     event.preventDefault();
     window.api.send("openTabMenu", tab.id);
   });
+  webview.addEventListener("ipc-message", (event) => {
+    const isThemeUpdate = event.channel === THEME_TAB_EVENTS.UPDATE;
+    if (isThemeUpdate) {
+      const [theme] = event.args;
+
+      handleInTabThemeUpdate(theme);
+    }
+  });
   webview.addEventListener("page-title-updated", () => {
     const newTitle = webview.getTitle();
     tab.setTitle(newTitle);

src/base/scripts/theme.js

@@ -1,35 +1,47 @@
 /**
  * @typedef {Parameters<typeof window.api.setTheme>[0]} ThemeId
+ * @typedef {ThemeId | "tab"} ThemeSetting
+ * @typedef {import("electron").IpcMessageEvent} IpcMessageEvent
  */
 
 const THEME_STORE_KEY = "theme";
+const THEME_TAB_EVENTS = Object.freeze({
+  REQUEST_UPDATE: "theme-request-update",
+  UPDATE: "theme-update",
+});
+
+/** @type {ThemeSetting | null} */
+let currentThemeSetting = null;
 
 window.addEventListener("DOMContentLoaded", () => {
-  const themeId = /** @type {ThemeId | null} */ (
+  currentThemeSetting = /** @type {ThemeSetting | null} */ (
     localStorage.getItem(THEME_STORE_KEY)
   );
 
-  if (themeId) {
-    setTheme(themeId);
+  if (isThemeId(currentThemeSetting)) {
+    setTheme(currentThemeSetting);
   }
 
-  prepareForm(themeId);
+  prepareForm(currentThemeSetting);
 });
 
 /**
- * @param {ThemeId | null} themeId
+ * @param {ThemeSetting | null} themeSetting
  */
-async function prepareForm(themeId) {
+async function prepareForm(themeSetting) {
   const { themeSelect } = await getThemeSettingsForm();
 
-  if (themeSelect && themeId) {
-    themeSelect.value = themeId;
+  if (themeSelect && themeSetting) {
+    themeSelect.value = themeSetting;
   }
 
   themeSelect?.addEventListener("change", (event) => {
     const { target } = event;
     const value = target instanceof HTMLSelectElement && target.value;
 
+    localStorage.setItem(THEME_STORE_KEY, value || "");
+    currentThemeSetting = isThemeSetting(value) ? value : null;
+
     if (isThemeId(value)) {
       setTheme(value);
     }
@@ -40,7 +52,6 @@ async function prepareForm(themeId) {
  * @param {ThemeId} themeId
  */
 function setTheme(themeId) {
-  localStorage.setItem(THEME_STORE_KEY, themeId);
   window.api.setTheme(themeId);
 }
 
@@ -54,6 +65,17 @@ async function getThemeSettingsForm() {
   return { themeSelect };
 }
 
+/**
+ * @param {string} inTabTheme
+ */
+function handleInTabThemeUpdate(inTabTheme) {
+  const shouldUseInTabTheme = currentThemeSetting === "tab";
+
+  if (shouldUseInTabTheme && isThemeId(inTabTheme)) {
+    setTheme(inTabTheme);
+  }
+}
+
 /**
  *
  * @param {unknown} value
@@ -64,3 +86,15 @@ function isThemeId(value) {
     typeof value === "string" && ["light", "dark", "system"].includes(value)
   );
 }
+
+/**
+ *
+ * @param {unknown} value
+ * @returns {value is ThemeSetting}
+ */
+function isThemeSetting(value) {
+  return (
+    typeof value === "string" &&
+    ["light", "dark", "system", "tab"].includes(value)
+  );
+}

src/base/scripts/webviews/preload.js

@@ -1,5 +1,7 @@
 // @ts-nocheck The file requires a review, before dedicating time to add quality types.
 
+const { ipcRenderer } = require("electron");
+
 // Set the title of the tab name
 /// Instead of the tab name being "PROJECT_NAME - Penpot", this script will remove the " - Penpot" portion.
 function SetTitleToDash() {
@@ -77,4 +79,40 @@ window.onload = function() {
             }
         };
     }
-};
+};
+
+// Theme
+window.addEventListener("DOMContentLoaded", () =>
+  onClassChange(document.body, () => dispatchThemeUpdate())
+);
+
+ipcRenderer.on("theme-request-update", () => dispatchThemeUpdate());
+
+/**
+ * Observes a node and executes a callback on a class change.
+ * 
+ * @param {Parameters<MutationObserver["observe"]>[0]} node
+ * @param {function} callback
+ */
+function onClassChange(node, callback) {
+  const observer = new MutationObserver((mutations) => {
+    const hasClassChanged = mutations.some(
+      ({ type, attributeName }) =>
+        type === "attributes" && attributeName === "class"
+    );
+
+    if (hasClassChanged) {
+      callback();
+    }
+  });
+
+  observer.observe(node, { attributes: true });
+}
+
+/**
+ * Sends an event, with a currently set theme, to the webview's host.
+ */
+function dispatchThemeUpdate() {
+  const isLightTheme = document.body.classList.contains("light");
+  ipcRenderer.sendToHost("theme-update", isLightTheme ? "light" : "dark");
+}

src/process/global.d.ts

@@ -1,13 +1,15 @@
+type Electron = import("electron");
+
 declare var api: {
   send: (channel: string, data: unknown) => void;
-  setTheme: (themeId: "light" | "dark" | "system") => void;
+  setTheme: (themeId: Electron.NativeTheme["themeSource"]) => void;
   onOpenTab: (callback: (href: string) => void) => void;
   onTabMenuAction: (
     callback: ({ command: string, tabId: number }) => void
   ) => void;
 };
 
-declare var mainWindow: import("electron").BrowserWindow;
+declare var mainWindow: Electron.BrowserWindow;
 
 declare var transparent: boolean;
 declare var AppIcon: string;