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

docs: fix missing import, explicitly use nativeTheme api (#21937)

Browse source 
* 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>
This commit is contained in:
Kilian Valkhof 2020-01-31 06:49:48 +01:00 committed by GitHub
parent 89eb309d0b
commit 95cfa1b0aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,10 +2,10 @@
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.
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 `isDarkMode` 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`.
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
@ -18,15 +18,12 @@ 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 changed event on Electron's `systemPreferences` module. E.g.
this by listening for the theme updated event on Electron's `nativeTheme` module. E.g.
```js
const { nativeTheme } = require('electron')
systemPreferences.subscribeNotification(
'AppleInterfaceThemeChangedNotification',
function theThemeHasChanged () {
updateMyAppTheme(nativeTheme.shouldUseDarkColors)
}
)
nativeTheme.on('updated', function theThemeHasChanged () {
updateMyAppTheme(nativeTheme.shouldUseDarkColors)
})
```