Add Appearance.setColorScheme support (#35989)

Summary: Both Android and iOS allow you to set application specific user interface style, which is useful for applications that support both light and dark mode. With the newly added `Appearance.setColorScheme`, you can natively manage the application's user interface style rather than keeping that preference in JavaScript. The benefit is that native dialogs like alert, keyboard, action sheets and more will also be affected by this change. Implemented using Android X [AppCompatDelegate.setDefaultNightMode](https://developer.android.com/reference/androidx/appcompat/app/AppCompatDelegate#setDefaultNightMode(int)) and iOS 13+ [overrideUserInterfaceStyle](https://developer.apple.com/documentation/uikit/uiview/3238086-overrideuserinterfacestyle?language=objc) ## Changelog [GENERAL] [ADDED] - Added `setColorScheme` to `Appearance` module Pull Request resolved: #35989 Test Plan: This is a void function so testing is rather limited. ```tsx // Lets assume a given device is set to **dark** mode. Appearance.getColorScheme(); // `dark` // Set the app's user interface to `light` Appearance.setColorScheme('light'); Appearance.getColorScheme(); // `light` // Set the app's user interface to `unspecified` Appearance.setColorScheme(null); Appearance.getColorScheme() // `dark` ``` Reviewed By: NickGerleman Differential Revision: D42801094 Pulled By: jacdebug fbshipit-source-id: ede810fe9ee98f313fd3fbbb16b60c84ef8c7204
facebook · Feb 7, 2023 · 0a4dcb0 · 0a4dcb0
1 parent 9af3c96
commit 0a4dcb0
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 0 deletions.
diff --git a/Libraries/Utilities/Appearance.d.ts b/Libraries/Utilities/Appearance.d.ts
@@ -28,6 +28,16 @@ export namespace Appearance {
    */
   export function getColorScheme(): ColorSchemeName;
 
+  /**
+   * Set the color scheme preference. This is useful for overriding the default
+   * color scheme preference for the app. Note that this will not change the
+   * appearance of the system UI, only the appearance of the app.
+   * Only available on iOS 13+ and Android 10+.
+   */
+  export function setColorScheme(
+    scheme: ColorSchemeName | null | undefined,
+  ): void;
+
   /**
    * Add an event handler that is fired when appearance preferences change.
    */

diff --git a/Libraries/Utilities/Appearance.js b/Libraries/Utilities/Appearance.js
@@ -85,6 +85,17 @@ module.exports = {
     return nativeColorScheme;
   },
 
+  setColorScheme(colorScheme: ?ColorSchemeName): void {
+    const nativeColorScheme = colorScheme == null ? 'unspecified' : colorScheme;
+
+    invariant(
+      colorScheme === 'dark' || colorScheme === 'light' || colorScheme == null,
+      "Unrecognized color scheme. Did you mean 'dark', 'light' or null?",
+    );
+
+    NativeAppearance?.setColorScheme?.(nativeColorScheme);
+  },
+
   /**
    * Add an event handler that is fired when appearance preferences change.
    */

diff --git a/Libraries/Utilities/NativeAppearance.js b/Libraries/Utilities/NativeAppearance.js
@@ -26,6 +26,7 @@ export interface Spec extends TurboModule {
   // types.
   /* 'light' | 'dark' */
   +getColorScheme: () => ?string;
+  +setColorScheme?: (colorScheme: string) => void;
 
   // RCTEventEmitter
   +addListener: (eventName: string) => void;

diff --git a/React/CoreModules/RCTAppearance.h b/React/CoreModules/RCTAppearance.h
@@ -8,6 +8,7 @@
 #import <UIKit/UIKit.h>
 
 #import <React/RCTBridgeModule.h>
+#import <React/RCTConvert.h>
 #import <React/RCTEventEmitter.h>
 
 RCT_EXTERN void RCTEnableAppearancePreference(BOOL enabled);

diff --git a/React/CoreModules/RCTAppearance.mm b/React/CoreModules/RCTAppearance.mm
@@ -10,6 +10,7 @@
 #import <FBReactNativeSpec/FBReactNativeSpec.h>
 #import <React/RCTConstants.h>
 #import <React/RCTEventEmitter.h>
+#import <React/RCTUtils.h>
 
 #import "CoreModulesPlugins.h"
 
@@ -68,6 +69,20 @@ void RCTOverrideAppearancePreference(NSString *const colorSchemeOverride)
   return RCTAppearanceColorSchemeLight;
 }
 
+@implementation RCTConvert (UIUserInterfaceStyle)
+
+RCT_ENUM_CONVERTER(
+    UIUserInterfaceStyle,
+    (@{
+      @"light" : @(UIUserInterfaceStyleLight),
+      @"dark" : @(UIUserInterfaceStyleDark),
+      @"unspecified" : @(UIUserInterfaceStyleUnspecified)
+    }),
+    UIUserInterfaceStyleUnspecified,
+    integerValue);
+
+@end
+
 @interface RCTAppearance () <NativeAppearanceSpec>
 @end
 
@@ -92,6 +107,17 @@ - (dispatch_queue_t)methodQueue
   return std::make_shared<NativeAppearanceSpecJSI>(params);
 }
 
+RCT_EXPORT_METHOD(setColorScheme : (NSString *)style)
+{
+  UIUserInterfaceStyle userInterfaceStyle = [RCTConvert UIUserInterfaceStyle:style];
+  NSArray<__kindof UIWindow *> *windows = RCTSharedApplication().windows;
+  if (@available(iOS 13.0, *)) {
+    for (UIWindow *window in windows) {
+      window.overrideUserInterfaceStyle = userInterfaceStyle;
+    }
+  }
+}
+
 RCT_EXPORT_SYNCHRONOUS_TYPED_METHOD(NSString *, getColorScheme)
 {
   if (_currentColorScheme == nil) {

diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/appearance/AppearanceModule.java b/ReactAndroid/src/main/java/com/facebook/react/modules/appearance/AppearanceModule.java
@@ -11,6 +11,7 @@
 import android.content.Context;
 import android.content.res.Configuration;
 import androidx.annotation.Nullable;
+import androidx.appcompat.app.AppCompatDelegate;
 import com.facebook.fbreact.specs.NativeAppearanceSpec;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReactApplicationContext;
@@ -66,6 +67,17 @@ private String colorSchemeForCurrentConfiguration(Context context) {
     return "light";
   }
 
+  @Override
+  public void setColorScheme(String style) {
+    if (style == "dark") {
+      AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
+    } else if (style == "light") {
+      AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
+    } else if (style == "unspecified") {
+      AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM);
+    }
+  }
+
   @Override
   public String getColorScheme() {
     // Attempt to use the Activity context first in order to get the most up to date

diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/appearance/BUCK b/ReactAndroid/src/main/java/com/facebook/react/modules/appearance/BUCK
@@ -14,6 +14,7 @@ rn_android_library(
     deps = [
         react_native_dep("third-party/java/jsr-305:jsr-305"),
         react_native_dep("third-party/android/androidx:annotation"),
+        react_native_dep("third-party/android/androidx:appcompat"),
         react_native_target("java/com/facebook/react/bridge:bridge"),
         react_native_target("java/com/facebook/react/common:common"),
         react_native_target("java/com/facebook/react/module/annotations:annotations"),

diff --git a/ReactAndroid/src/main/java/com/facebook/react/shell/BUCK b/ReactAndroid/src/main/java/com/facebook/react/shell/BUCK
@@ -15,6 +15,7 @@ rn_android_library(
         react_native_dep("libraries/fresco/fresco-react-native:imagepipeline"),
         react_native_dep("libraries/soloader/java/com/facebook/soloader:soloader"),
         react_native_dep("third-party/android/androidx:annotation"),
+        react_native_dep("third-party/android/androidx:appcompat"),
         react_native_dep("third-party/android/androidx:core"),
         react_native_dep("third-party/android/androidx:fragment"),
         react_native_dep("third-party/android/androidx:legacy-support-core-utils"),