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

上一篇文字的图标模式中,引出了mac系统的外观配色模式的概念。那么,在本篇文章中,苏南大叔要案例的内容就是:在electron程序中,如何实时检测,mac系统的外观配色方案。

苏南大叔:electron程序,如何判断mac系统外观配色模式? - mac-theme-hero
electron程序,如何判断mac系统外观配色模式?(图5-1)

本文测试环境:mac@mojaveelectron@6.0.0

切换外观模式

切换外观模式的方法是:在“系统偏好设置”的“通用”里面,进行切换。

苏南大叔:electron程序,如何判断mac系统外观配色模式? - mac-theme
electron程序,如何判断mac系统外观配色模式?(图5-2)

mac系统专有

本文代码是mac系统专有的,所以,需要配置个前提条件。检测是否是mac的方法如下:

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

否则在win10下运行的话,也许会触发下面的错误信息:

苏南大叔:electron程序,如何判断mac系统外观配色模式? - mac-theme-error
electron程序,如何判断mac系统外观配色模式?(图5-3)

判断外观模式

目前来说,mac@mojave的外观模式,分为两种,darklight。截至到发稿,electron@6.0.0上的判断函数,只有一个,是否为dark模式。所以判断代码为:

if(systemPreferences.isDarkMode()){
  //dark
}
else{
  //light
}

外观模式切换事件

mac系统上的electron,有个外观切换事件AppleInterfaceThemeChangedNotification

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

最终代码

electron程序,如何判断mac系统外观配色模式?最终的参考demo,代码如下:

苏南大叔:electron程序,如何判断mac系统外观配色模式? - mac-theme-code
electron程序,如何判断mac系统外观配色模式?(图5-4)

newsn.net:这里是【评论】可见内容

苏南大叔:electron程序,如何判断mac系统外观配色模式? - mac-theme-result
electron程序,如何判断mac系统外观配色模式?(图5-5)

结束语

本文中,苏南大叔介绍的是,electron程序,如何检测mac系统外观属性。更多electron相关博客文章,请点击苏南大叔的博客:

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   electron