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

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

View file

@ -47,6 +47,8 @@ Returns:
Returns `Boolean` - Whether the system is in Dark Mode. 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_ ### `systemPreferences.isSwipeTrackingFromScrollEventsEnabled()` _macOS_
Returns `Boolean` - Whether the Swipe between pages setting is on. Returns `Boolean` - Whether the Swipe between pages setting is on.

View file

@ -1,35 +1,19 @@
# Mojave Dark Mode # 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/) 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 for all macOS computers. If your app does have a dark mode, you can make your Electron app
to the dark mode setting when it's enabled. This is primarily due to Apple's own guidelines saying you **shouldn't** follow the system-wide dark mode setting.
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. 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 ## Automatically updating the native interfaces
"Native Interfaces" include the file picker, window border, dialogs, context menus and more; basically anything where "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 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
to set the `NSRequiresAquaSystemAppearance` key in your app's `Info.plist` file to `false`. E.g. 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
```xml out of this theming.
<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.
## Automatically updating your own interfaces ## Automatically updating your own interfaces

View file

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