mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

docs: add a mojave dark mode guide (#15267)

Browse source
This commit is contained in:
Samuel Attard 2018-11-08 11:16:47 +11:00 • committed by Charles Kerr
commit 4e53019b75
1 changed files with 46 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

46
docs/tutorial/mojave-dark-mode-guide.md Normal file
View file

@ -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
<plist>
<dict>
...
<key>NSRequiresAquaSystemAppearance</key>
<false />
...
</dict>
</plist>
```
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())
}
)
```