95cfa1b0aa
* docs: fix missing import, explicitly use nativeTheme api * Update docs/tutorial/mojave-dark-mode-guide.md Co-Authored-By: Charles Kerr <ckerr@github.com> * switch to nativeTheme event Co-authored-by: Charles Kerr <ckerr@github.com>
1.6 KiB
Mojave Dark Mode
In macOS 10.14 Mojave, Apple introduced a new system-wide dark mode for all macOS computers. If your app does have a dark mode, you can make your Electron app follow the system-wide dark mode setting using the nativeTheme api.
In macOS 10.15 Catalina, Apple introduced a new "automatic" dark mode option for all macOS computers. In order
for the nativeTheme.shouldUseDarkColors and Tray APIs to work correctly in this mode on Catalina you need to either have NSRequiresAquaSystemAppearance set to false in your Info.plist file or be on Electron >=7.0.0.
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. The default behavior as of Electron 7.0.0 is to opt in to this automatic
theming from the OS. If you wish to opt out you must set the NSRequiresAquaSystemAppearance key in the Info.plist file
to true. Please note that once Electron starts building against the 10.14 SDK it will not be possible for you to opt
out of this theming.
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 updated event on Electron's nativeTheme module. E.g.
const { nativeTheme } = require('electron')
nativeTheme.on('updated', function theThemeHasChanged () {
updateMyAppTheme(nativeTheme.shouldUseDarkColors)
})