Add monochrome tray icon toggle

src/@types/global.d.ts

@@ -20,8 +20,8 @@ declare global {
     var launcher: AutoLaunch;
     var vectorConfig: Record<string, any>;
     var trayConfig: {
-        // eslint-disable-next-line camelcase
-        icon_path: string;
+        color_icon_path: string; // eslint-disable-line camelcase
+        monochrome_icon_path: string; // eslint-disable-line camelcase
         brand: string;
     };
     var store: Store<{
@@ -31,6 +31,7 @@ declare global {
         autoHideMenuBar?: boolean;
         locale?: string | string[];
         disableHardwareAcceleration?: boolean;
+        monochrome?: boolean;
     }>;
 }
 /* eslint-enable no-var */

src/electron-main.ts

@@ -212,9 +212,11 @@ async function setupGlobals(): Promise<void> {
 
     // The tray icon
     // It's important to call `path.join` so we don't end up with the packaged asar in the final path.
-    const iconFile = `element.${process.platform === "win32" ? "ico" : "png"}`;
+    const colorIconFile = `element.${process.platform === "win32" ? "ico" : "png"}`;
+    const monochromeIconFile = `monochrome.${process.platform === "win32" ? "ico" : "png"}`;
     global.trayConfig = {
-        icon_path: path.join(resPath, "img", iconFile),
+        monochrome_icon_path: path.join(resPath, "img", monochromeIconFile),
+        color_icon_path: path.join(resPath, "img", colorIconFile),
         brand: global.vectorConfig.brand || "Element",
     };
 
@@ -453,7 +455,7 @@ app.on("ready", async () => {
         titleBarStyle: process.platform === "darwin" ? "hidden" : "default",
         trafficLightPosition: { x: 9, y: 8 },
 
-        icon: global.trayConfig.icon_path,
+        icon: global.trayConfig.color_icon_path,
         show: false,
         autoHideMenuBar: global.store.get("autoHideMenuBar", true),
 

src/i18n/strings/en_EN.json

@@ -14,6 +14,7 @@
         "redo": "Redo",
         "select_all": "Select All",
         "show_hide": "Show/Hide",
+        "toggle_monochrome": "Monochrome Icon",
         "undo": "Undo",
         "zoom_in": "Zoom In",
         "zoom_out": "Zoom Out"

src/tray.ts

@@ -38,8 +38,20 @@ function toggleWin(): void {
     }
 }
 
+function toggleMonochrome(): void {
+    const monochrome = !isMonochrome();
+    if (monochrome) {
+        trayIcon?.setImage(nativeImage.createFromPath(global.trayConfig.monochrome_icon_path));
+    } else {
+        trayIcon?.setImage(nativeImage.createFromPath(global.trayConfig.color_icon_path));
+    }
+    global.store.set("monochrome", monochrome);
+    initApplicationMenu();
+}
+
 interface IConfig {
-    icon_path: string; // eslint-disable-line camelcase
+    color_icon_path: string; // eslint-disable-line camelcase
+    monochrome_icon_path: string; // eslint-disable-line camelcase
     brand: string;
 }
 
@@ -49,10 +61,16 @@ function getUuid(): string {
     return global.vectorConfig["uuid"] || "eba84003-e499-4563-8e9d-166e34b5cc25";
 }
 
+function isMonochrome(): boolean {
+    return global.store.get("monochrome", process.platform === "linux");
+}
+
 export function create(config: IConfig): void {
     // no trays on darwin
     if (process.platform === "darwin" || trayIcon) return;
-    const defaultIcon = nativeImage.createFromPath(config.icon_path);
+    const defaultIcon = nativeImage.createFromPath(
+        isMonochrome() ? config.monochrome_icon_path : config.color_icon_path,
+    );
 
     let guid: string | undefined;
     if (process.platform === "win32" && app.isPackaged) {
@@ -114,6 +132,12 @@ export function initApplicationMenu(): void {
     }
 
     const contextMenu = Menu.buildFromTemplate([
+        {
+            label: _t("action|toggle_monochrome"),
+            click: toggleMonochrome,
+            type: "checkbox",
+            checked: isMonochrome(),
+        },
         {
             label: _t("action|show_hide"),
             click: toggleWin,