feat: Add checkbox for enbale/disable figma-linux themes

Author: ChugunovRoman

@types/Common/index.d.ts

@@ -158,6 +158,7 @@ interface SettingsInterface {
     enableColorSpaceSrgb: boolean;
     visibleNewProjectBtn: boolean;
     useZenity: boolean;
+    disableThemes: boolean;
     panelHeight: number;
     saveLastOpenedTabs: boolean;
     exportDir: string;

@types/index.d.ts

@@ -65,6 +65,7 @@ declare namespace Electron {
       channel: "enableColorSpaceSrgbWasChanged",
       listener: (event: IpcMainInvokeEvent, enabled: boolean) => void,
     ): this;
+    on(channel: "disableThemesChanged", listener: (event: IpcMainInvokeEvent, enabled: boolean) => void): this;
     on(channel: "updateFigmaUiScale", listener: (event: IpcMainInvokeEvent, scale: number) => void): this;
     on(channel: "updatePanelScale", listener: (event: IpcMainInvokeEvent, scale: number) => void): this;
     on(channel: "startAppAuth", listener: (event: IpcMainInvokeEvent, auth: { grantPath: string }) => void): this;
@@ -123,6 +124,7 @@ declare namespace Electron {
       listener: (event: IpcMainInvokeEvent, data: WebApi.CreateMultipleExtension) => Promise<void> | any,
     ): void;
     handle(channel: "isDevToolsOpened", listener: (event: IpcMainInvokeEvent) => Promise<void> | any): void;
+    handle(channel: "themesIsDisabled", listener: (event: IpcMainInvokeEvent) => Promise<void> | boolean): void;
     handle(
       channel: "writeFiles",
       listener: (event: IpcMainInvokeEvent, data: WebApi.WriteFiles) => Promise<void> | void,
@@ -185,6 +187,7 @@ declare namespace Electron {
     send(channel: "closeThemeCreatorView"): this;
     send(channel: "themeCreatorExportTheme", theme: Themes.Theme): this;
     send(channel: "enableColorSpaceSrgbWasChanged", enabled: boolean): this;
+    send(channel: "disableThemesChanged", enabled: boolean): this;
     send(channel: "updateFigmaUiScale", scale: number): this;
     send(channel: "updatePanelScale", scale: number): this;
     send(channel: "log-debug", ...args: any[]): this;
@@ -211,6 +214,7 @@ declare namespace Electron {
     invoke(channel: "getLocalFileExtensionManifest", id: number): Promise<number[]>;
     invoke(channel: "getLocalFileExtensionSource", id: number): Promise<Extensions.ExtensionSource>;
     invoke(channel: "createMultipleNewLocalFileExtensions", data: WebApi.CreateMultipleExtension): Promise<any>;
+    invoke(channel: "themesIsDisabled"): Promise<boolean>;
     invoke(channel: "isDevToolsOpened"): Promise<boolean>;
     invoke(channel: "writeFiles", data: WebApi.WriteFiles): Promise<void>;
     invoke(channel: "get-fonts"): Promise<FontsMap>;

src/constants/_defaultSettings.ts

@@ -10,6 +10,7 @@ export const DEFAULT_SETTINGS: SettingsInterface = {
     enableColorSpaceSrgb: false,
     visibleNewProjectBtn: true,
     useZenity: false,
+    disableThemes: false,
     panelHeight: 40,
     saveLastOpenedTabs: true,
     exportDir: `${process.env.HOME}/Pictures/Figma`,

src/main/events/ipcMain.ts

@@ -78,6 +78,10 @@ export const registerIpcMainHandlers = () => {
     return view.sender.isDevToolsOpened();
   });
 
+  E.ipcMain.handle("themesIsDisabled", async () => {
+    return storage.get().app.disableThemes;
+  });
+
   listenToWebBindingPromise("openExtensionDirectory", async (webContents: E.WebContents, id: number) => {
     console.error("TODO");
   });

src/main/window/Tabs.ts

@@ -40,6 +40,12 @@ export default class Tabs {
     tab.setBounds(rect);
     tab.webContents.loadURL(url);
     tab.webContents.on("dom-ready", () => {
+      const disableThemes = storage.get().app.disableThemes;
+
+      if (disableThemes) {
+        return;
+      }
+
       const currentThemeId = storage.get().theme.currentTheme;
       if (currentThemeId !== "0") {
         const wm = WindowManager.instance;

src/main/window/WindowManager.ts

@@ -58,6 +58,7 @@ class WindowManager {
   private static _instance: WindowManager;
   private panelHeight = storage.get().app.panelHeight;
   private enableColorSpaceSrgbWasChanged = false;
+  private disableThemesChanged = false;
   private figmaUserIDs: string[] = [];
 
   private constructor() {
@@ -112,9 +113,11 @@ class WindowManager {
       this.updateThemes();
     });
 
-    getThemeById().then(theme => {
-      this.currentTheme = theme;
-    });
+    if (!storage.get().app.disableThemes) {
+      getThemeById().then(theme => {
+        this.currentTheme = theme;
+      });
+    }
 
     this.updatePanelScale(this.panelScale);
   }
@@ -356,7 +359,7 @@ class WindowManager {
         return;
       }
 
-      tab.view.webContents.session.setPermissionRequestHandler((webContents, permission, cb) => {
+      tab.view.webContents.session.setPermissionRequestHandler((_, permission, cb) => {
         const id = dialogs.showMessageBoxSync({
           type: "question",
           title: "Figma",
@@ -383,16 +386,16 @@ class WindowManager {
 
       this.mainWindow.webContents.send("setIsInVoiceCall", { id: tab.view.webContents.id, isInVoiceCall });
     });
-    E.ipcMain.on("setWorkspaceName", (event, name) => {
+    E.ipcMain.on("setWorkspaceName", (_, name) => {
       logger.info("The setWorkspaceName not implemented, workspaceName: ", name);
     });
-    E.ipcMain.on("setFigjamEnabled", (event, enabled) => {
+    E.ipcMain.on("setFigjamEnabled", (_, enabled) => {
       logger.info("The setFigjamEnabled not implemented, enabled: ", enabled);
     });
-    E.ipcMain.on("receiveTabs", (event, tabs) => {
+    E.ipcMain.on("receiveTabs", (_, tabs) => {
       this.tabs = tabs;
     });
-    E.ipcMain.on("enableColorSpaceSrgbWasChanged", (event, enabled) => {
+    E.ipcMain.on("enableColorSpaceSrgbWasChanged", (_, enabled) => {
       const previousValue = storage.get().app.enableColorSpaceSrgb;
 
       if (enabled === previousValue) {
@@ -401,6 +404,15 @@ class WindowManager {
 
       this.enableColorSpaceSrgbWasChanged = true;
     });
+    E.ipcMain.on("disableThemesChanged", (_, enabled) => {
+      const previousValue = storage.get().app.disableThemes;
+
+      if (enabled === previousValue) {
+        return;
+      }
+
+      this.disableThemesChanged = true;
+    });
     E.ipcMain.on("closeSettingsView", () => {
       if (!this.settingsView) {
         return;
@@ -412,20 +424,38 @@ class WindowManager {
 
       this.mainWindow.removeBrowserView(this.settingsView);
 
+      let id = 1;
       if (this.enableColorSpaceSrgbWasChanged) {
-        const id = dialogs.showMessageBoxSync({
+        id = dialogs.showMessageBoxSync({
           type: "question",
           title: "Figma",
           message: "Restart to Change Color Space?",
           detail: `Figma needs to be restarted to change the color space.`,
           textOkButton: "Restart",
           defaultFocusedButton: "Ok",
         });
+      }
+      if (this.disableThemesChanged) {
+        let text = "Restart to disable themes?";
+        const disableThemes = storage.get().app.disableThemes;
 
-        if (!id) {
-          E.app.relaunch();
-          E.app.quit();
+        if (!disableThemes) {
+          text = "Restart to enable themes?";
         }
+
+        id = dialogs.showMessageBoxSync({
+          type: "question",
+          title: "Figma",
+          message: text,
+          detail: `Figma needs to be restarted to change use of themes.`,
+          textOkButton: "Restart",
+          defaultFocusedButton: "Ok",
+        });
+      }
+
+      if (!id) {
+        E.app.relaunch();
+        E.app.quit();
       }
 
       this.destroyView(this.settingsView);
@@ -453,6 +483,10 @@ class WindowManager {
       this.mainWindow.webContents.send("updateVisibleNewProjectBtn", visible);
     });
     E.ipcMain.on("themes-change", (_, theme) => {
+      if (storage.get().app.disableThemes) {
+        return;
+      }
+
       if (theme.id === Const.TEST_THEME_ID) {
         const testTheme = this.themes.find(t => t.id === theme.id);
 
@@ -464,6 +498,10 @@ class WindowManager {
       this.changeTheme(theme);
     });
     E.ipcMain.on("set-default-theme", () => {
+      if (storage.get().app.disableThemes) {
+        return;
+      }
+
       this.changeTheme(Const.DEFAULT_THEME);
     });
     E.ipcMain.on("saveCreatorTheme", (_, theme) => {

src/middleware/ThemesManager.ts

@@ -8,7 +8,13 @@ export class ThemesManager {
   constructor() {
     this.currentTheme = DEFAULT_THEME;
 
-    this.themeEvents();
+    E.ipcRenderer.invoke("themesIsDisabled").then(disabled => {
+      if (disabled) {
+        return;
+      }
+
+      this.themeEvents();
+    });
   }
 
   private themeEvents() {

src/middleware/webBinding.ts

@@ -446,9 +446,13 @@ const init = (fileBrowser: boolean): void => {
   E.webFrame.executeJavaScript(`(${initWebApi.toString()})(${JSON.stringify(initWebOptions)})`);
 
   document.addEventListener("DOMContentLoaded", () => {
-    setTimeout(() => {
-      themes.init();
-    }, 10);
+    E.ipcRenderer.invoke("themesIsDisabled").then(disabled => {
+      if (!disabled) {
+        setTimeout(() => {
+          themes.init();
+        }, 10);
+      }
+    });
   });
 };
 

src/renderer/components/Settings/views/General/index.tsx

@@ -69,6 +69,11 @@ const GeneralBody: React.FunctionComponent<GeneralBodyProps> = props => {
             text="Use Zenity for Dialogs"
             onChange={props.settings.changeUseZenity}
           />
+          <CheckBox
+            value={props.settings.settings.app.disableThemes}
+            text="Disable themes"
+            onChange={props.settings.changeDisableThemes}
+          />
         </div>
         <div></div>
         <div className="flex flex_column">

src/renderer/stores/Settings.ts

@@ -63,6 +63,12 @@ export class Settings {
 
     this.useZenityChanged = true;
   };
+  @action
+  public changeDisableThemes = (value: boolean): void => {
+    this.settings.app.disableThemes = value;
+
+    E.ipcRenderer.send("disableThemesChanged", value);
+  };
 
   @action
   public selectExportDir = async (): Promise<void> => {