Browse Source

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.
Samuel Attard 5 years ago
parent
commit
4d8a05568b

+ 2 - 0
docs/api/system-preferences.md

@@ -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.

+ 8 - 24
docs/tutorial/mojave-dark-mode-guide.md

@@ -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 - 0
shell/browser/resources/mac/Info.plist

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