fix(fabric): colors not respecting dark mode appearance, implement platform color (#2867)

Author: Saadnajmi

docsite/api/intro.md

@@ -7,4 +7,4 @@ slug: /
 
 Welcome to the React Native macOS API reference documentation. This section covers macOS-specific props and events that extend the standard React Native components.
 
-Most of the additional functionality out of React Native macOS directly is in the form of additional props and callback events implemented on `<View>`, to provide macOS and desktop specific behavior
+Most of the additional functionality out of React Native macOS directly is in the form of additional props and callback events implemented on `<View>`, to provide macOS and desktop specific behavior. We also have some additional APIs, like platform specific colors. 

docsite/api/platform-color.md

@@ -0,0 +1,50 @@
+---
+sidebar_label: 'Platform Colors'
+sidebar_position: 2
+---
+
+# Platform Colors
+
+React Native macOS extends the core `PlatformColor` API with helpers that map directly to AppKit system colors. These helpers make it easier to adopt macOS appearance and accessibility behaviors without writing native code.
+
+## `DynamicColorMacOS`
+
+`DynamicColorMacOS` creates a color that automatically adapts to light, dark, and high-contrast appearances on macOS.
+
+:::note
+`DynamicColorIOS` works on macOS too, they are essentially equivalent
+:::
+
+| Option               | Description                                                     |
+| -------------------- | --------------------------------------------------------------- |
+| `light`              | Color used in the standard light appearance.                    |
+| `dark`               | Color used in the standard dark appearance.                     |
+| `highContrastLight`  | Optional color for high-contrast light mode. Defaults to `light`.|
+| `highContrastDark`   | Optional color for high-contrast dark mode. Defaults to `dark`. |
+
+## `ColorWithSystemEffectMacOS`
+
+`ColorWithSystemEffectMacOS(color, effect)` wraps an existing color so AppKit can apply control state effects such as pressed, disabled, or rollover.
+
+| Parameter | Description |
+| --------- | ----------- |
+| `color`   | A string produced by `PlatformColor`, `DynamicColorMacOS`, or a CSS color string. |
+| `effect`  | One of `none`, `pressed`, `deepPressed`, `disabled`, or `rollover`. |
+
+```javascript
+import {
+  ColorWithSystemEffectMacOS,
+  DynamicColorMacOS,
+  PlatformColor,
+  StyleSheet,
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  buttonPressed: {
+    backgroundColor: ColorWithSystemEffectMacOS(
+      PlatformColor('controlColor'),
+      'pressed',
+    ),
+  },
+});
+```

docsite/sidebarsApi.ts

@@ -3,6 +3,7 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
 const sidebars: SidebarsConfig = {
   apiSidebar: [
     'intro',
+    'platform-color',
     'view-props',
     'view-events',
   ],

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

@@ -1171,7 +1171,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
@@ -1202,6 +1202,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;
 
@@ -1223,6 +1226,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,
@@ -1249,10 +1258,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.h

@@ -20,9 +20,19 @@ struct DynamicColor {
   int32_t highContrastDarkColor = 0;
 };
 
+#if TARGET_OS_OSX // [macOS
+struct ColorWithSystemEffect {
+  int32_t color = 0;
+  std::string effect;
+};
+#endif // macOS]
+
 struct Color {
   Color(int32_t color);
   Color(const DynamicColor& dynamicColor);
+#if TARGET_OS_OSX // [macOS
+  Color(const ColorWithSystemEffect& colorWithSystemEffect);
+#endif // macOS]
   Color(const ColorComponents& components);
   Color() : uiColor_(nullptr){};
   int32_t getColor() const;

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

@@ -20,6 +20,33 @@
 
 namespace facebook::react {
 
+#if TARGET_OS_OSX // [macOS
+RCTPlatformColor *_Nullable UIColorFromColorWithSystemEffect(
+    RCTUIColor *baseColor,
+    const std::string &systemEffectString)
+{
+  if (baseColor == nil) {
+    return nil;
+  }
+
+  NSColor *colorWithEffect = baseColor;
+  if (!systemEffectString.empty()) {
+    if (systemEffectString == "none") {
+      colorWithEffect = [baseColor colorWithSystemEffect:NSColorSystemEffectNone];
+    } else if (systemEffectString == "pressed") {
+      colorWithEffect = [baseColor colorWithSystemEffect:NSColorSystemEffectPressed];
+    } else if (systemEffectString == "deepPressed") {
+      colorWithEffect = [baseColor colorWithSystemEffect:NSColorSystemEffectDeepPressed];
+    } else if (systemEffectString == "disabled") {
+      colorWithEffect = [baseColor colorWithSystemEffect:NSColorSystemEffectDisabled];
+    } else if (systemEffectString == "rollover") {
+      colorWithEffect = [baseColor colorWithSystemEffect:NSColorSystemEffectRollover];
+    }
+  }
+  return colorWithEffect;
+}
+#endif // macOS]
+
 namespace {
 
 bool UIColorIsP3ColorSpace(const std::shared_ptr<void> &uiColor)
@@ -104,7 +131,6 @@ bool UIColorIsP3ColorSpace(const std::shared_ptr<void> &uiColor)
   } else {
     return nil;
   }
-
   return nil;
 }
 
@@ -120,7 +146,11 @@ int32_t ColorFromColorComponents(const facebook::react::ColorComponents &compone
 int32_t ColorFromUIColor(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
+  [[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]});
 }
 
@@ -137,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]
 }
 
@@ -170,9 +214,7 @@ int32_t ColorFromUIColor(const std::shared_ptr<void> &uiColor)
     return 0;
   }
 
-#if TARGET_OS_OSX // [macOS]
-  return ColorFromUIColor(uiColor);
-#else // [macOS
+#if !TARGET_OS_OSX // [macOS]
   static UITraitCollection *darkModeTraitCollection =
       [UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleDark];
   auto darkColor = ColorFromUIColorForSpecificTraitCollection(uiColor, darkModeTraitCollection);
@@ -202,6 +244,15 @@ int32_t ColorFromUIColor(const std::shared_ptr<void> &uiColor)
       darkAccessibilityContrastColor,
       lightAccessibilityContrastColor,
       UIColorIsP3ColorSpace(uiColor));
+#else // [macOS
+  // Hash both light and dark appearance colors to properly distinguish
+  // dynamic colors that change with appearance.
+  auto darkColor = ColorFromUIColorForSpecificAppearance(
+      uiColor, [NSAppearance appearanceNamed:NSAppearanceNameDarkAqua]);
+  auto lightColor = ColorFromUIColorForSpecificAppearance(
+      uiColor, [NSAppearance appearanceNamed:NSAppearanceNameAqua]);
+
+  return facebook::react::hash_combine(darkColor, lightColor);
 #endif // macOS]
 }
 
@@ -224,6 +275,21 @@ int32_t ColorFromUIColor(const std::shared_ptr<void> &uiColor)
       0);
 }
 
+#if TARGET_OS_OSX // [macOS
+Color::Color(const ColorWithSystemEffect &colorWithSystemEffect)
+{
+  RCTUIColor *baseColor = UIColorFromInt32(colorWithSystemEffect.color);
+  RCTUIColor *colorWithEffect =
+      UIColorFromColorWithSystemEffect(baseColor, colorWithSystemEffect.effect);
+  if (colorWithEffect != nil) {
+    uiColor_ = wrapManagedObject(colorWithEffect);
+  }
+  uiColorHashValue_ = facebook::react::hash_combine(
+      colorWithSystemEffect.color,
+      std::hash<std::string>{}(colorWithSystemEffect.effect));
+}
+#endif // macOS]
+
 Color::Color(const ColorComponents &components)
 {
   uiColor_ = wrapManagedObject(UIColorFromComponentsColor(components));

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

@@ -62,6 +62,24 @@ SharedColor parsePlatformColor(const ContextContainer &contextContainer, int32_t
         items.at("dynamic").hasType<std::unordered_map<std::string, RawValue>>()) {
       auto dynamicItems = (std::unordered_map<std::string, RawValue>)items.at("dynamic");
       return RCTPlatformColorComponentsFromDynamicItems(contextContainer, surfaceId, dynamicItems);
+#if TARGET_OS_OSX // [macOS
+    } else if (
+        items.find("colorWithSystemEffect") != items.end() &&
+        items.at("colorWithSystemEffect").hasType<std::unordered_map<std::string, RawValue>>()) {
+      auto colorWithSystemEffectItems =
+          (std::unordered_map<std::string, RawValue>)items.at("colorWithSystemEffect");
+      if (colorWithSystemEffectItems.find("baseColor") != colorWithSystemEffectItems.end() &&
+          colorWithSystemEffectItems.find("systemEffect") != colorWithSystemEffectItems.end() &&
+          colorWithSystemEffectItems.at("systemEffect").hasType<std::string>()) {
+        SharedColor baseColorShared{};
+        fromRawValue(contextContainer, surfaceId, colorWithSystemEffectItems.at("baseColor"), baseColorShared);
+        if (baseColorShared) {
+          std::string systemEffect = (std::string)colorWithSystemEffectItems.at("systemEffect");
+          auto baseColor = (*baseColorShared).getColor();
+          return SharedColor(Color(ColorWithSystemEffect{baseColor, systemEffect}));
+        }
+      }
+#endif // macOS]
     }
   }