Electron 托盘图标根据深色主题而变化？

Question

我正在使用 Electron 并尝试开发托盘(菜单栏)应用程序。



我知道如何设置图标:

const {Tray} = require('electron')
appIcon = new Tray('/path/to/my/icon')

我如何创建一个图标(或选择一个不同的)，它会根据用户选择的主题(正常或黑暗)改变颜色？

在上面的例子中，我使用了深色主题，所以我可以创建一个白色的图标，但是当用户使用普通的白色主题时会发生什么？

Answer 1

您应该使用模板图像(只有黑色和清晰的颜色):https://github.com/electron/electron/blob/master/docs/api/native-image.md#template-image

这样，macOS 会自动将您的托盘图标在正常主题下调整为黑色，在深色主题下调整为白色。

确保文件名以 Template.png 结尾，否则将无法工作!如果您的目标是 hi-dpi 设备，还包括 @2x.png 版本。

所以你的文件夹看起来像:

.
├── main.js
├── IconTemplate.png
└── IconTemplate@2x.png

然后在您的 main.js 中:

const {Tray} = require('electron')
appIcon = new Tray('./IconTemplate.png')