feat(tray): use template for menu icons

bin/tray-icons/build-icons.sh

@@ -29,8 +29,8 @@ generateDpiScaledIcons "$images_dir/icon-color.svg"
 generateDpiScaledIcons "$images_dir/icon-purple.svg"
 
 for file in *.svg; do
-    name=$(basename $file .svg) 
-    generateDpiScaledIcons "$file"
+    name="$(basename $file .svg)Template"
+    generateDpiScaledIcons "$file" "Template"
     magick "$output_dir/$name.png" -channel RGB -negate "$output_dir/$name-inverted.png"
     magick "$output_dir/$name@1.25x.png" -channel RGB -negate "$output_dir/$name-inverted@1.25x.png"
     magick "$output_dir/$name@1.5x.png" -channel RGB -negate "$output_dir/$name-inverted@1.5x.png"

src/services/tray.ts

@@ -33,8 +33,8 @@ function getTrayIconPath() {
 }
 
 function getIconPath(name: string) {
-    const suffix = (nativeTheme.shouldUseDarkColors ? "-inverted" : "");
-    return path.join(path.dirname(fileURLToPath(import.meta.url)), "../..", "images", "app-icons", "tray", `${name}${suffix}.png`);
+    const suffix = (!isMac && nativeTheme.shouldUseDarkColors ? "-inverted" : "");
+    return path.join(path.dirname(fileURLToPath(import.meta.url)), "../..", "images", "app-icons", "tray", `${name}Template${suffix}.png`);
 }
 
 function registerVisibilityListener() {
@@ -55,7 +55,10 @@ function registerVisibilityListener() {
 
     mainWindow.on("minimize", updateTrayMenu);
     mainWindow.on("maximize", updateTrayMenu);
-    nativeTheme.on("updated", updateTrayMenu);
+    if (!isMac) {
+        // macOS uses template icons which work great on dark & light themes.
+        nativeTheme.on("updated", updateTrayMenu);
+    }
     ipcMain.on("reload-tray", updateTrayMenu);
     i18next.on("languageChanged", updateTrayMenu);
 }