manual changes

Author: Saadnajmi

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -1177,7 +1177,7 @@ - (void)invalidateLayer
 #if !TARGET_OS_OSX // [macOS]
   RCTPlatformColor *backgroundColor = [_backgroundColor resolvedColorWithTraitCollection:self.traitCollection];
 #else // [macOS
-  RCTPlatformColor *backgroundColor = _backgroundColor;
+  RCTPlatformColor *backgroundColor = [_backgroundColor resolvedColorWithAppearance:self.effectiveAppearance];
 #endif // macOS]
   // The reason we sometimes do not set self.layer's backgroundColor is because
   // we want to support non-uniform border radii, which apple does not natively
@@ -1208,6 +1208,9 @@ - (void)invalidateLayer
 
     layer.borderWidth = (CGFloat)borderMetrics.borderWidths.left;
     RCTPlatformColor *borderColor = RCTUIColorFromSharedColor(borderMetrics.borderColors.left); // [macOS]
+#if TARGET_OS_OSX // [macOS
+    borderColor = [borderColor resolvedColorWithAppearance:self.effectiveAppearance];
+#endif // macOS]
     layer.borderColor = borderColor.CGColor;
     layer.cornerRadius = (CGFloat)borderMetrics.borderRadii.topLeft.horizontal;
 
@@ -1229,6 +1232,12 @@ - (void)invalidateLayer
     layer.cornerRadius = 0;
 
     RCTBorderColors borderColors = RCTCreateRCTBorderColorsFromBorderColors(borderMetrics.borderColors);
+#if TARGET_OS_OSX // [macOS
+    borderColors.top = [borderColors.top resolvedColorWithAppearance:self.effectiveAppearance];
+    borderColors.left = [borderColors.left resolvedColorWithAppearance:self.effectiveAppearance];
+    borderColors.bottom = [borderColors.bottom resolvedColorWithAppearance:self.effectiveAppearance];
+    borderColors.right = [borderColors.right resolvedColorWithAppearance:self.effectiveAppearance];
+#endif // macOS]
 
     RCTAddContourEffectToLayer(
         _borderLayer,
@@ -1255,10 +1264,16 @@ - (void)invalidateLayer
 
     if (borderMetrics.borderRadii.isUniform() && borderMetrics.borderRadii.topLeft.horizontal == 0) {
       RCTPlatformColor *outlineColor = RCTUIColorFromSharedColor(_props->outlineColor); // [macOS]
+#if TARGET_OS_OSX // [macOS
+      outlineColor = [outlineColor resolvedColorWithAppearance:self.effectiveAppearance];
+#endif // macOS]
       _outlineLayer.borderWidth = _props->outlineWidth;
       _outlineLayer.borderColor = outlineColor.CGColor;
     } else {
       RCTPlatformColor *outlineColor = RCTUIColorFromSharedColor(_props->outlineColor); // [macOS]
+#if TARGET_OS_OSX // [macOS
+      outlineColor = [outlineColor resolvedColorWithAppearance:self.effectiveAppearance];
+#endif // macOS]
 
       RCTAddContourEffectToLayer(
           _outlineLayer,

packages/react-native/React/RCTUIKit/RCTUIKitCompat.h

@@ -27,6 +27,13 @@ NS_ASSUME_NONNULL_BEGIN
 #else
 @compatibility_alias RCTPlatformColor NSColor;
 @compatibility_alias RCTUIColor NSColor;
+
+@interface NSColor (RCTAppearanceResolving)
+/// Resolve a dynamic/semantic NSColor for a specific appearance, analogous to
+/// UIColor's -resolvedColorWithTraitCollection: on iOS.
+- (NSColor *)resolvedColorWithAppearance:(NSAppearance *)appearance;
+@end
+
 #endif
 
 // MARK: - Event types

packages/react-native/React/RCTUIKit/RCTUIKitCompat.m

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) Microsoft Corporation.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS]
+
+#import "RCTUIKitCompat.h"
+
+#if TARGET_OS_OSX
+
+@implementation NSColor (RCTAppearanceResolving)
+
+- (NSColor *)resolvedColorWithAppearance:(NSAppearance *)appearance
+{
+  __block NSColor *resolved = self;
+  [appearance performAsCurrentDrawingAppearance:^{
+    CGColorRef cgColor = self.CGColor;
+    if (cgColor) {
+      NSColor *fromCG = [NSColor colorWithCGColor:cgColor];
+      if (fromCG) {
+        resolved = fromCG;
+      }
+    }
+  }];
+  return resolved;
+}
+
+@end
+
+#endif // TARGET_OS_OSX

packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.mm

@@ -21,7 +21,7 @@
 namespace facebook::react {
 
 #if TARGET_OS_OSX // [macOS
-RCTUIColor *_Nullable UIColorFromColorWithSystemEffect(
+RCTPlatformColor *_Nullable UIColorFromColorWithSystemEffect(
     RCTUIColor *baseColor,
     const std::string &systemEffectString)
 {
@@ -131,7 +131,6 @@ bool UIColorIsP3ColorSpace(const std::shared_ptr<void> &uiColor)
   } else {
     return nil;
   }
-
   return nil;
 }
 
@@ -150,16 +149,7 @@ int32_t ColorFromUIColor(RCTPlatformColor *color) // [macOS]
 #if !TARGET_OS_OSX // [macOS]
   [color getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
 #else // [macOS
-  // Resolve dynamic/semantic colors against the current effective appearance
-  // so that dark mode colors are correctly extracted.
-  [[NSApp effectiveAppearance] performAsCurrentDrawingAppearance:^{
-    NSColor *resolvedColor = [color colorUsingColorSpace:[NSColorSpace sRGBColorSpace]];
-    if (resolvedColor) {
-      [resolvedColor getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
-    } else {
-      [color getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
-    }
-  }];
+  [[color colorUsingColorSpace:[NSColorSpace genericRGBColorSpace]] getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha: &rgba[3]];
 #endif // macOS]
   return ColorFromColorComponents({(float)rgba[0], (float)rgba[1], (float)rgba[2], (float)rgba[3]});
 }
@@ -177,15 +167,29 @@ int32_t ColorFromUIColorForSpecificTraitCollection(
 
   return 0;
 }
+#else // [macOS
+int32_t ColorFromUIColorForSpecificAppearance(
+    const std::shared_ptr<void> &uiColor,
+    NSAppearance *appearance)
+{
+  RCTPlatformColor *color = (RCTPlatformColor *)unwrapManagedObject(uiColor);
+  if (color) {
+    __block int32_t resolvedColorInt = 0;
+    [appearance performAsCurrentDrawingAppearance:^{
+      resolvedColorInt = ColorFromUIColor(color);
+    }];
+    return resolvedColorInt;
+  }
+  return 0;
+}
 #endif // [macOS]
 
 int32_t ColorFromUIColor(const std::shared_ptr<void> &uiColor)
 {
 #if !TARGET_OS_OSX // [macOS]
   return ColorFromUIColorForSpecificTraitCollection(uiColor, [UITraitCollection currentTraitCollection]);
 #else // [macOS
-  RCTPlatformColor *color = (RCTPlatformColor *)unwrapManagedObject(uiColor);
-  return ColorFromUIColor(color);
+  return ColorFromUIColorForSpecificAppearance(uiColor, [NSApp effectiveAppearance]);
 #endif // macOS]
 }
 
@@ -243,27 +247,10 @@ int32_t ColorFromUIColor(const std::shared_ptr<void> &uiColor)
 #else // [macOS
   // Hash both light and dark appearance colors to properly distinguish
   // dynamic colors that change with appearance.
-  RCTPlatformColor *color = (RCTPlatformColor *)unwrapManagedObject(uiColor);
-  __block int32_t darkColor = 0;
-  __block int32_t lightColor = 0;
-
-  [[NSAppearance appearanceNamed:NSAppearanceNameDarkAqua] performAsCurrentDrawingAppearance:^{
-    NSColor *resolved = [color colorUsingColorSpace:[NSColorSpace sRGBColorSpace]];
-    if (resolved) {
-      CGFloat rgba[4];
-      [resolved getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
-      darkColor = ColorFromColorComponents({(float)rgba[0], (float)rgba[1], (float)rgba[2], (float)rgba[3]});
-    }
-  }];
-
-  [[NSAppearance appearanceNamed:NSAppearanceNameAqua] performAsCurrentDrawingAppearance:^{
-    NSColor *resolved = [color colorUsingColorSpace:[NSColorSpace sRGBColorSpace]];
-    if (resolved) {
-      CGFloat rgba[4];
-      [resolved getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
-      lightColor = ColorFromColorComponents({(float)rgba[0], (float)rgba[1], (float)rgba[2], (float)rgba[3]});
-    }
-  }];
+  auto darkColor = ColorFromUIColorForSpecificAppearance(
+      uiColor, [NSAppearance appearanceNamed:NSAppearanceNameDarkAqua]);
+  auto lightColor = ColorFromUIColorForSpecificAppearance(
+      uiColor, [NSAppearance appearanceNamed:NSAppearanceNameAqua]);
 
   return facebook::react::hash_combine(darkColor, lightColor);
 #endif // macOS]

packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/RCTPlatformColorUtils.mm

@@ -327,18 +327,7 @@
 static inline facebook::react::ColorComponents _ColorComponentsFromUIColor(RCTPlatformColor *color) // [macOS]
 {
   CGFloat rgba[4];
-#if !TARGET_OS_OSX // [macOS]
   [color getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
-#else // [macOS
-  // Resolve dynamic/semantic colors against the current effective appearance
-  // so that dark mode colors are correctly extracted.
-  NSAppearance *previousAppearance = NSAppearance.currentAppearance;
-  NSAppearance.currentAppearance = [NSApp effectiveAppearance];
-  NSColor *resolvedColor = [color colorUsingColorSpace:[NSColorSpace sRGBColorSpace]];
-  NSAppearance.currentAppearance = previousAppearance;
-  NSColor *finalColor = resolvedColor ?: [color colorUsingColorSpace:[NSColorSpace genericRGBColorSpace]];
-  [finalColor getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
-#endif // macOS]
   return {(float)rgba[0], (float)rgba[1], (float)rgba[2], (float)rgba[3]};
 }