Theme aware platform color for text. (microsoft#15266)

* Theme aware platform color for text.

* Change files

* Fix Text component renders black in dark mode (Fabric)

Fixes microsoft#15158

Text components without explicit color props were rendering as black in dark mode. Modified TextDrawing.cpp to detect default black colors (RGB <= 10) and replace with theme-aware TextFillColorPrimary which resolves to white in dark mode and black in light mode.

---------

Co-authored-by: Nitin Chaudhary <[email protected]>

Author: Nitin-100

change/react-native-windows-38df6ceb-14f4-4615-8f66-fd249d0d89ad.json

@@ -0,0 +1,7 @@
+{
+  "comment": "Theme aware platform color for text.",
+  "type": "prerelease",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/Composition/TextDrawing.cpp

@@ -7,6 +7,7 @@
 #include "TextDrawing.h"
 
 #include <AutoDraw.h>
+#include <Fabric/platform/react/renderer/graphics/PlatformColorUtils.h>
 #include <Utils/ValueUtils.h>
 #include <unicode.h>
 #include <windows.ui.composition.interop.h>
@@ -35,11 +36,27 @@ void RenderText(
   // to cache and reuse a brush across all text elements instead, taking care to recreate
   // it in the event of device removed.
   winrt::com_ptr<ID2D1SolidColorBrush> brush;
+
+  // Check if we should use theme-aware default color instead of hardcoded black
+  bool useDefaultColor = false;
   if (textAttributes.foregroundColor) {
+    auto &color = *textAttributes.foregroundColor;
+    // If it's black (or very dark) without explicit PlatformColor, use theme-aware color
+    if (color.m_platformColor.empty() && color.m_color.R <= 10 && color.m_color.G <= 10 && color.m_color.B <= 10) {
+      useDefaultColor = true;
+    }
+  } else {
+    useDefaultColor = true;
+  }
+
+  if (useDefaultColor) {
+    // Use theme-aware TextFillColorPrimary which adapts to light/dark mode
+    auto d2dColor = theme.D2DPlatformColor("TextFillColorPrimary");
+    winrt::check_hresult(deviceContext.CreateSolidColorBrush(d2dColor, brush.put()));
+  } else {
+    // User set explicit color or PlatformColor - use it
     auto color = theme.D2DColor(*textAttributes.foregroundColor);
     winrt::check_hresult(deviceContext.CreateSolidColorBrush(color, brush.put()));
-  } else {
-    winrt::check_hresult(deviceContext.CreateSolidColorBrush(D2D1::ColorF(D2D1::ColorF::Black, 1.0f), brush.put()));
   }
 
   if (textAttributes.textDecorationLineType) {
@@ -72,12 +89,27 @@ void RenderText(
             (fragment.textAttributes.foregroundColor != textAttributes.foregroundColor) ||
         !isnan(fragment.textAttributes.opacity)) {
       winrt::com_ptr<ID2D1SolidColorBrush> fragmentBrush;
+
+      // Check if we should use theme-aware default color for this fragment
+      bool useFragmentDefaultColor = false;
       if (fragment.textAttributes.foregroundColor) {
+        auto &color = *fragment.textAttributes.foregroundColor;
+        // If it's black (or very dark) without explicit PlatformColor, use theme-aware color
+        if (color.m_platformColor.empty() && color.m_color.R <= 10 && color.m_color.G <= 10 && color.m_color.B <= 10) {
+          useFragmentDefaultColor = true;
+        }
+      } else {
+        useFragmentDefaultColor = true;
+      }
+
+      if (useFragmentDefaultColor) {
+        // Use theme-aware TextFillColorPrimary which adapts to light/dark mode
+        auto d2dColor = theme.D2DPlatformColor("TextFillColorPrimary");
+        winrt::check_hresult(deviceContext.CreateSolidColorBrush(d2dColor, fragmentBrush.put()));
+      } else {
+        // User set explicit color or PlatformColor - use it
         auto color = theme.D2DColor(*fragment.textAttributes.foregroundColor);
         winrt::check_hresult(deviceContext.CreateSolidColorBrush(color, fragmentBrush.put()));
-      } else {
-        winrt::check_hresult(
-            deviceContext.CreateSolidColorBrush(D2D1::ColorF(D2D1::ColorF::Black, 1.0f), fragmentBrush.put()));
       }
 
       if (fragment.textAttributes.textDecorationLineType) {

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/PlatformColorUtils.cpp

@@ -189,4 +189,21 @@ SharedColor GetTextInputPlaceholderColor(bool isFocused, const winrt::Windows::U
   }
 }
 
+SharedColor GetDefaultTextColor() {
+  // In high contrast mode, always use system WindowText for accessibility
+  auto accessibilitySettings{winrt::Windows::UI::ViewManagement::AccessibilitySettings()};
+  if (accessibilitySettings.HighContrast()) {
+    auto uiSettings{winrt::Windows::UI::ViewManagement::UISettings()};
+    auto windowText = uiSettings.UIElementColor(winrt::Windows::UI::ViewManagement::UIElementType::WindowText);
+    return hostPlatformColorFromRGBA(windowText.R, windowText.G, windowText.B, windowText.A);
+  }
+
+  // Use Windows 11 design system semantic color TextFillColorPrimary
+  // This automatically adapts to light/dark mode themes:
+  // - Light mode: rgba(0, 0, 0, 0.894) - nearly black for good contrast
+  // - Dark mode: rgba(255, 255, 255, 1.0) - white for readability
+  auto color = ResolvePlatformColor({"TextFillColorPrimary"});
+  return hostPlatformColorFromRGBA(color.R, color.G, color.B, color.A);
+}
+
 } // namespace facebook::react

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/PlatformColorUtils.h

@@ -17,4 +17,7 @@ winrt::Windows::UI::Color ResolvePlatformColor(const std::vector<std::string> &s
 // Get appropriate placeholder text color for TextInput based on focus state and background
 SharedColor GetTextInputPlaceholderColor(bool isFocused, const winrt::Windows::UI::Color &backgroundColor = {});
 
+// Get default text foreground color for Text component (theme-aware)
+SharedColor GetDefaultTextColor();
+
 } // namespace facebook::react