Mojave Dark Mode

In macOS 10.14 Mojave, Apple introduced a new system-wide dark mode for all macOS computers. By default Electron apps do not automatically adjust their UI and native interfaces to the dark mode setting when it's enabled. This is primarily due to Apple's own guidelines saying you shouldn't use the dark mode native interfaces if your app's own interfaces don't support dark mode themselves.

If your app does have a dark mode, you can make your Electron app follow the system-wide dark mode setting.

Automatically updating the native interfaces

"Native Interfaces" include the file picker, window border, dialogs, context menus and more; basically anything where the UI comes from macOS and not your app. In order to make these interfaces update to dark mode automatically, you need to set the NSRequiresAquaSystemAppearance key in your app's Info.plist file to false. 例如:

<plist>
<dict>
  ...
  <key>NSRequiresAquaSystemAppearance</key>
  <false />
  ...
</dict>
</plist>

If you are using electron-packager >= 12.2.0 or electron-forge >= 6 you can set the darwinDarkModeSupport option when packaging and this key will be set for you.

If you are using electron-builder >= 20.37.0 you can set the darkModeSupport option.

Automatically updating your own interfaces

If your app has its own dark mode you should toggle it on and off in sync with the system's dark mode setting. You can do this by listening for the theme changed event on Electron's systemPreferences module. 例如:

const { systemPreferences } = require('electron')
systemPreferences.subscribeNotification(
  'AppleInterfaceThemeChangedNotification',
  function theThemeHasChanged () {
    updateMyAppTheme(systemPreferences.isDarkMode())
  }
)