diff --git a/docs/tutorial/mojave-dark-mode-guide.md b/docs/tutorial/mojave-dark-mode-guide.md new file mode 100644 index 0000000000000..ede8fa5857a94 --- /dev/null +++ b/docs/tutorial/mojave-dark-mode-guide.md @@ -0,0 +1,46 @@ +# Mojave Dark Mode + +In macOS 10.14 Mojave, Apple introduced a new [system-wide dark mode](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/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`. E.g. + +```xml + + + ... + NSRequiresAquaSystemAppearance + + ... + + +``` + +If you are using [`electron-packager` >= 12.2.0](https://github.com/electron-userland/electron-packager) or +[`electron-forge` >= 6](https://github.com/electron-userland/electron-forge) you can set the +[`darwinDarkModeSupport`](https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#darwindarkmodesupport) +option when packaging and this key will be set for you. + +## 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. E.g. + +```js +const { systemPreferences } = require('electron') + +systemPreferences.subscribeNotification( + 'AppleInterfaceThemeChangedNotification', + function theThemeHasChanged () { + updateMyAppTheme(systemPreferences.isDarkMode()) + } +) +```