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()
相关链接:
AppleInterfaceThemeChangedNotification
在mac
系统外观切换的过程中,需要监控的事件是:AppleInterfaceThemeChangedNotification
。
// const { systemPreferences } = require("electron");
systemPreferences.subscribeNotification(
'AppleInterfaceThemeChangedNotification', () => {
//...
}
)
相关链接:
setImage
和setPressedImage
这两个是更换托盘图标的核心函数,注意事项就是<ico>
的路径,千万想好了,写对了。
tray.setImage("<ico>")
tray.setPressedImage("<ico>")
函数说明,可以参考:
格式、尺寸及位置,可以参考:
最终代码
破局的思路就是这样的:摒弃官方提供的Template
命名方案,而是采用普通的命名方案。然后监控系统外观切换事件,根据事件设置不同的普通图标文件。
下面的代码,是苏南大叔自己想的,仅供参考。您要是写不出来最终的代码,就可以查看一下苏南大叔写的解决方案,仅供参考。
seosn.com:这里是【评论】可见内容
相关链接
- 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
相关经验文章,希望你能够保存转发。
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
大佬递茶
111
足足足足足足
学习一下
来学习一下
只有mac的吗?
看看
123
111
6
6666666
大佬能问下,如何在electron项目里面使用vscode吗?
see
学习下