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

feat: enable dark mode support by default on macOS (#19226)

Browse source 
This adds the NSRequiresAquaSystemAppearance key to our default Info.plist file which will tell macOS to auto-switch our effectiveAppearance in sync with the OS.  The dark mode documentation has been updated to reflect how to opt *out* of this but it is also noted that certain dark mode APIs will not work on Catalina if you opt out.
This commit is contained in:
Samuel Attard 2019-07-15 01:23:12 -07:00 committed by Cheng Zhao
parent ab8b940151
commit 4d8a05568b
3 changed files with 12 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/api/system-preferences.md
View file

@ -47,6 +47,8 @@ Returns:
Returns `Boolean` - Whether the system is in Dark Mode.
**Note:** On macOS 10.15 Catalina in order for this API to return the correct value when in the "automatic" dark mode setting you must either have `NSRequiresAquaSystemAppearance=false` in your `Info.plist` or be on Electron `>=7.0.0`. See the [dark mode guide](../tutorial/mojave-dark-mode-guide.md) for more information.
### `systemPreferences.isSwipeTrackingFromScrollEventsEnabled()` _macOS_
Returns `Boolean` - Whether the Swipe between pages setting is on.

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

@ -1,35 +1,19 @@
# 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.
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.
If your app does have a dark mode, you can make your Electron app follow the system-wide dark mode setting.
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 `true` 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. 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.
If you are using [`electron-builder` >= 20.37.0](https://github.com/electron-userland/electron-builder) you can set the [`darkModeSupport`](https://www.electron.build/configuration/mac.html) option.
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 `false`. 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

2
shell/browser/resources/mac/Info.plist
View file

@ -30,5 +30,7 @@
<true/>
<key>NSHighResolutionCapable</key>
<true/>
<key>NSRequiresAquaSystemAppearance</key>
<false/>
</dict>
</plist>