feat(tray): support dark theme for icons

bin/tray-icons/build-icons.sh

@@ -1,5 +1,10 @@
 #!/usr/bin/env bash
 
+if ! command -v magick &> /dev/null; then
+  echo "This tool requires ImageMagick to be installed in order to create the icons."
+  exit 1
+fi
+
 if ! command -v inkscape &> /dev/null; then
   echo "This tool requires Inkscape to be render sharper SVGs than ImageMagick."
   exit 1
@@ -11,4 +16,5 @@ output_dir="$script_dir/../../images/app-icons/tray"
 for file in *.svg; do
     name=$(basename $file .svg)
     inkscape -w 16 -h 16 "$file" -o "$output_dir/$name-16.png"
+    magick "$output_dir/$name-16.png" -channel RGB -negate "$output_dir/$name-inverted-16.png"
 done

src/services/tray.ts

@@ -9,6 +9,7 @@ import type BNote from "../becca/entities/bnote.js";
 import becca from "../becca/becca.js";
 import becca_service from "../becca/becca_service.js";
 import type BRecentNote from "../becca/entities/brecent_note.js";
+import { nativeTheme } from "electron/main";
 
 let tray: Tray;
 // `mainWindow.isVisible` doesn't work with `mainWindow.show` and `mainWindow.hide` - it returns `false` when the window
@@ -35,7 +36,9 @@ function getTrayIconPath() {
 
 function getIconPath(name: string) {
     const size = 16;
-    return path.join(path.dirname(fileURLToPath(import.meta.url)), "../..", "images", "app-icons", "tray", `${name}-${size}.png`);
+    let suffix = (nativeTheme.shouldUseDarkColors ? "-inverted" : "");
+    suffix += `-${size}`;
+    return path.join(path.dirname(fileURLToPath(import.meta.url)), "../..", "images", "app-icons", "tray", `${name}${suffix}.png`);
 }
 
 function registerVisibilityListener() {