diff --git a/res/img/monochrome.ico b/res/img/monochrome.ico new file mode 100644 index 0000000..4dd249e Binary files /dev/null and b/res/img/monochrome.ico differ diff --git a/res/img/monochrome.png b/res/img/monochrome.png new file mode 100644 index 0000000..a3f5018 Binary files /dev/null and b/res/img/monochrome.png differ diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 4404692..6a7a394 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -20,8 +20,8 @@ declare global { var launcher: AutoLaunch; var vectorConfig: Record; 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 */ diff --git a/src/electron-main.ts b/src/electron-main.ts index febd87b..9ff8f8f 100644 --- a/src/electron-main.ts +++ b/src/electron-main.ts @@ -212,9 +212,11 @@ async function setupGlobals(): Promise { // 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), diff --git a/src/settings.ts b/src/settings.ts index 50e3a08..b4a13ad 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -67,4 +67,13 @@ export const Settings: Record = { global.store.set("disableHardwareAcceleration", !value); }, }, + "Electron.monochromeIcon": { + async read(): Promise { + return tray.isMonochrome(); + }, + async write(value: any): Promise { + global.store.set("monochromeIcon", value); + tray.refreshIcon(); + }, + }, }; diff --git a/src/tray.ts b/src/tray.ts index 339ca83..b863238 100644 --- a/src/tray.ts +++ b/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) {