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>
29 lines
1.6 KiB
Markdown
29 lines
1.6 KiB
Markdown
# 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. 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](../api/native-theme.md).
|
|
|
|
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.
|
|
|
|
```js
|
|
const { nativeTheme } = require('electron')
|
|
|
|
nativeTheme.on('updated', function theThemeHasChanged () {
|
|
updateMyAppTheme(nativeTheme.shouldUseDarkColors)
|
|
})
|
|
```
|