Add Appearance.setColorScheme support

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.
    */

Libraries/Utilities/Appearance.js

@@ -85,6 +85,19 @@ 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?",
+    );
+
+    if (NativeAppearance != null) {
+      NativeAppearance.setColorScheme(nativeColorScheme);
+    }
+  },
+
   /**
    * Add an event handler that is fired when appearance preferences change.
    */

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;

React/CoreModules/RCTAppearance.h

@@ -7,6 +7,7 @@
 
 #import <UIKit/UIKit.h>
 
+#import <React/RCTConvert.h>
 #import <React/RCTBridgeModule.h>
 #import <React/RCTEventEmitter.h>
 

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) {

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

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"),

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"),