Dark Mode in Electron 5.0

Electron

新版浏览器提供了 prefers-color-scheme 这个 Media Query 用于检测当前的系统环境是否为 Dark Mode(对应的笔记见这里)。这个 API 在 Chrome 76 及 Electron 7.0 版本中提供。

对于 Electron 5 以及 Electron 6 的版本,可以通过 systemPreferences 这个 API 来进行判断。

示意代码如下:

const { systemPreferences } = require('electron');

console.log('Current: ', systemPreferences.isDarkMode());

systemPreferences.subscribeNotification(
  'AppleInterfaceThemeChangedNotification',
  function theThemeHasChanged () {
    console.log(systemPreferences.isDarkMode());
  }
);

几点说明:

  1. 代码需要在主进程执行;
  2. systemPreferences.isDarkMode API 已经废弃了(见文档),在 Electron 7.0+ 版本中,应该使用 nativeTheme.shouldUseDarkColors 进行判断(见文档)。