allow to tweak svg-icon before applying as tray-icon

Signed-off-by: Roman <ixrock@gmail.com>

package.json

@@ -170,6 +170,7 @@
     "@types/fs-extra": "^9.0.1",
     "@types/http-proxy": "^1.17.4",
     "@types/js-yaml": "^3.12.4",
+    "@types/jsdom": "^16.2.4",
     "@types/jsonpath": "^0.2.0",
     "@types/lodash": "^4.14.155",
     "@types/marked": "^0.7.4",
@@ -192,6 +193,7 @@
     "http-proxy": "^1.18.1",
     "immer": "^7.0.5",
     "js-yaml": "^3.14.0",
+    "jsdom": "^16.4.0",
     "jsonpath": "^1.0.2",
     "lodash": "^4.17.15",
     "mac-ca": "^1.0.4",

src/main/tray.ts

@@ -1,7 +1,8 @@
 import path from "path"
 import sharp from "sharp";
+import jsdom from "jsdom"
 import packageInfo from "../../package.json"
-import { dialog, Menu, nativeImage, Tray } from "electron"
+import { dialog, Menu, nativeImage, nativeTheme, Tray } from "electron"
 import { isDevelopment, isMac } from "../common/vars";
 import { autorun } from "mobx";
 import { showAbout } from "./menu";
@@ -33,8 +34,17 @@ export function initTray(windowManager: WindowManager) {
 
 export async function buildTray(menu: Menu) {
   logger.info("[TRAY]: build start");
+
+  // modify icon's svg
+  const svgDom = await jsdom.JSDOM.fromFile(trayIcon);
+  const svgRoot = svgDom.window.document.body.getElementsByTagName("svg")[0];
+  const trayIconColor = nativeTheme.themeSource == "dark" ? "white" : "#333"; // fixme: nativeTheme.themeSource always == "system" (MacOS)
+  svgRoot.innerHTML += `<style>* {fill: ${trayIconColor} !important;}</style>`
+  const svgIconBuffer = Buffer.from(svgRoot.outerHTML);
+
+  // convert to .png or .icon for system tray and resize
+  const pngIcon = await sharp(svgIconBuffer).png().toBuffer();
   const iconSize = isMac ? 16 : 32; // todo: verify on windows/linux
-  const pngIcon = await sharp(trayIcon).png().toBuffer();
   const icon = nativeImage.createFromBuffer(pngIcon).resize({
     width: iconSize,
     height: iconSize

yarn.lock

@@ -1890,6 +1890,15 @@
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.4.tgz#7d3b534ec35a0585128e2d332db1403ebe057e25"
   integrity sha512-fYMgzN+9e28R81weVN49inn/u798ruU91En1ZnGvSZzCRc5jXx9B2EDhlRaWmcO1RIxFHL8AajRXzxDuJu93+A==
 
+"@types/jsdom@^16.2.4":
+  version "16.2.4"
+  resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.4.tgz#527ca99943e00561ca4056b1904fd5f4facebc3b"
+  integrity sha512-RssgLa5ptjVKRkHho/Ex0+DJWkVsYuV8oh2PSG3gKxFp8n/VNyB7kOrZGQkk2zgPlcBkIKOItUc/T5BXit9uhg==
+  dependencies:
+    "@types/node" "*"
+    "@types/parse5" "*"
+    "@types/tough-cookie" "*"
+
 "@types/json-schema@^7.0.3":
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
@@ -1996,6 +2005,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/parse5@*":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"
+  integrity sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==
+
 "@types/podium@*":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/podium/-/podium-1.0.0.tgz#bfaa2151be2b1d6109cc69f7faa9dac2cba3bb20"
@@ -7376,6 +7390,38 @@ jsdom@^16.2.2:
     ws "^7.2.3"
     xml-name-validator "^3.0.0"
 
+jsdom@^16.4.0:
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.4.0.tgz#36005bde2d136f73eee1a830c6d45e55408edddb"
+  integrity sha512-lYMm3wYdgPhrl7pDcRmvzPhhrGVBeVhPIqeHjzeiHN3DFmD1RBpbExbi8vU7BJdH8VAZYovR8DMt0PNNDM7k8w==
+  dependencies:
+    abab "^2.0.3"
+    acorn "^7.1.1"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.2.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.0"
+    domexception "^2.0.1"
+    escodegen "^1.14.1"
+    html-encoding-sniffer "^2.0.1"
+    is-potential-custom-element-name "^1.0.0"
+    nwsapi "^2.2.0"
+    parse5 "5.1.1"
+    request "^2.88.2"
+    request-promise-native "^1.0.8"
+    saxes "^5.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^3.0.1"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^6.1.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+    ws "^7.2.3"
+    xml-name-validator "^3.0.0"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -12052,7 +12098,7 @@ webidl-conversions@^5.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
   integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
 
-webidl-conversions@^6.0.0:
+webidl-conversions@^6.0.0, webidl-conversions@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==