Make appearanceChanged event consistent with Android/iOS (#13499)

* Make appearanceChanged event consistent with Android/iOS

On Android and iOS, the `appearanceChanged` global event has an object
payload where the updated dark/light string value is nested as a property.

This makes Windows consistent with iOS and Android.

* Change files

* yarn format

change/react-native-windows-bdd93326-988c-4313-b50d-26ae62117088.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Make appearanceChanged event consistent with Android/iOS",
+  "packageName": "react-native-windows",
+  "email": "erozell@outlook.com",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Modules/AppearanceModule.cpp

@@ -68,7 +68,7 @@ void Appearance::RequeryTheme() noexcept {
   auto oldTheme = winrt::unbox_value_or<ApplicationTheme>(oldThemeBoxed, ApplicationTheme::Light);
 
   if (oldTheme != theme) {
-    appearanceChanged(ToString(theme));
+    appearanceChanged({ToString(theme)});
   }
 }
 

vnext/Microsoft.ReactNative/Modules/AppearanceModule.h

@@ -9,6 +9,12 @@
 
 namespace Microsoft::ReactNative {
 
+REACT_STRUCT(AppearanceChangeArgs)
+struct AppearanceChangeArgs {
+  REACT_FIELD(colorScheme)
+  std::string colorScheme;
+};
+
 REACT_MODULE(Appearance)
 struct Appearance : std::enable_shared_from_this<Appearance> {
   using ApplicationTheme = xaml::ApplicationTheme;
@@ -31,7 +37,7 @@ struct Appearance : std::enable_shared_from_this<Appearance> {
   void removeListeners(double count) noexcept;
 
   REACT_EVENT(appearanceChanged);
-  std::function<void(std::string const &)> appearanceChanged;
+  std::function<void(AppearanceChangeArgs const &)> appearanceChanged;
 
   // This function allows the module to get the current theme on the UI thread before it is requested by any JS thread
   static void InitOnUIThread(const Mso::React::IReactContext &context) noexcept;