电子托盘图标是否根据黑暗主题而改变？

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或不起作用！@2x.png如果您针对Hi-dpi设备，还请包括一个版本。

因此您的文件夹如下所示：

.
??? main.js
??? IconTemplate.png
??? IconTemplate@2x.png

然后在您的main.js：

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

Answer 2

我试图让它发挥作用，所以这就是我最终得到的结果：

// create a new native image from icon
const icon = nativeImage.createFromPath('some/icon.png');
// if you want to resize it, be careful, it creates a copy
const trayIcon = icon.resize({ width: 16 });
// here is the important part (has to be set on the resized version)
trayIcon.setTemplateImage(true);
const tray = new Tray(trayIcon)

诀窍是使用我正在使用的setTemplateImage(true)，但作为最后一步，我调整了图标大小，并且生成的图像没有设置模板标志。