[JavaScript知识库]Electron那些事11：快捷键和黑暗模式

【前言】

本节讲下electron下设置快捷键和mac黑暗模式的使用

【快捷键设置】

快捷键设置比较简单，下面是全局快捷键设置

globalShortcut.register(shortcutKey, shortcutCallback);

传入快捷键名称，和快捷键回调即可

这里需要在app退出时释放掉全局快捷键，如下

  app.on('will-quit', () => {
    globalShortcut.unregisterAll();
  });

快捷键的key可以取的值，可以看这里

https://www.electronjs.org/zh/docs/latest/api/accelerator

【黑暗模式】

mac下黑暗模式的切换比较常见，有几种方式进行适配

第一种，存css判断，详见如何用纯css给网页实现夜间模式(译) - 简书

@media (prefers-color-scheme: dark) { 
  ... 暗夜模式下的css样式
}

@media (prefers-color-scheme: light) {
  ... 白天模式下css样式
}

第二种，通过electron的api判断，分为主动获取黑暗模式状态和监听黑暗模式状态

主动获取，如下

nativeTheme.shouldUseDarkColors

监听状态，如下

  // native theme updated
  nativeTheme.on('updated', () => {
    const wins = BrowserWindow.getAllWindows();
    for(let win of wins){
      win.webContents.send(IPC_DARKMODE_CHANGE, nativeTheme.shouldUseDarkColors);
    }
  });

上述代码监听到变化后给渲染进程发消息通知

以上代码详见：GitHub - insistime-guides/electron-guides at 0.3.6

【总结】

1.electron设置全局快捷键

2.electron获取黑暗模式状态

3.electron监听黑暗模式状态