electron程序，如何实现自适应外观模式的彩色托盘图标？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

在mac系统中，托盘图标可以根据mac系统的外观方案，自动进行切换。但是这种模版图标的方案，有个不太好的地方，就是：图标会变成黑白色的。当然了，这个符合苹果的工业美感设计。不过，对于很多用户来说，还是会更喜欢带有各种颜色的图标，对吧？所以，本文中描述的就是这个需求的解决方案。

本文测试环境：mac、electron@6.0.0。再次强调，本文说的是mac系统下的事情，对于win10系统，不匹配但是也有借鉴意义。

mac专属

这段代码是基于mac系统的，所以有个mac专属判断。代码如下：

if (process.platform == 'darwin') {
  //mac
}

systemPreferences.isDarkMode()

在mac基础上第二层判断，就是外观模式。所以，这里判断isDarkMode()。

// const { systemPreferences } = require("electron");
systemPreferences.isDarkMode()

相关链接：

• https://newsn.net/say/electron-mac-theme.html

AppleInterfaceThemeChangedNotification

在mac系统外观切换的过程中，需要监控的事件是：AppleInterfaceThemeChangedNotification。

// const { systemPreferences } = require("electron");
systemPreferences.subscribeNotification(
  'AppleInterfaceThemeChangedNotification', () => {
    //...
  }
)

相关链接：

• https://newsn.net/say/electron-mac-theme.html

setImage和setPressedImage

这两个是更换托盘图标的核心函数，注意事项就是<ico>的路径，千万想好了，写对了。

tray.setImage("<ico>")
tray.setPressedImage("<ico>")

函数说明，可以参考：

• https://newsn.net/say/electron-tray-switch.html

格式、尺寸及位置，可以参考：

• https://newsn.net/say/electron-tray-ico.html

最终代码

破局的思路就是这样的：摒弃官方提供的Template命名方案，而是采用普通的命名方案。然后监控系统外观切换事件，根据事件设置不同的普通图标文件。

下面的代码，是苏南大叔自己想的，仅供参考。您要是写不出来最终的代码，就可以查看一下苏南大叔写的解决方案，仅供参考。

相关链接

• https://newsn.net/say/electron-tray.html
• https://newsn.net/say/electron-tray-ico.html
• https://newsn.net/say/electron-tray-ico-name.html
• https://newsn.net/say/electron-tray-template.html

结束语

在本文中，苏南大叔案例的是：自适应外观模式的彩色托盘图标的实现方式。技术点比较容易，就是组合起来，需要点小小的思路和技巧。在文章的最后，苏南大叔给你推荐了一个链接，下面的electron相关经验文章，希望你能够保存转发。

• https://newsn.net/tag/electron/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。