Add monochrome tray icon

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;
+        monochromeIcon?: 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/settings.ts

@@ -67,4 +67,13 @@ export const Settings: Record<string, Setting> = {
             global.store.set("disableHardwareAcceleration", !value);
         },
     },
+    "Electron.monochromeIcon": {
+        async read(): Promise<any> {
+            return tray.isMonochrome();
+        },
+        async write(value: any): Promise<void> {
+            global.store.set("monochromeIcon", value);
+            tray.refreshIcon();
+        },
+    },
 };

src/tray.ts

@@ -28,6 +28,19 @@ export function destroy(): void {
     }
 }
 
+export function isMonochrome(): boolean {
+    return global.store.get("monochromeIcon", process.platform === "linux");
+}
+
+export function refreshIcon(): 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));
+    }
+}
+
 function toggleWin(): void {
     if (global.mainWindow?.isVisible() && !global.mainWindow.isMinimized() && global.mainWindow.isFocused()) {
         global.mainWindow.hide();
@@ -39,7 +52,8 @@ function toggleWin(): void {
 }
 
 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;
 }
 
@@ -52,7 +66,9 @@ function getUuid(): string {
 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) {