Theme aware platform color for text. #15266

Nitin-100 · 2025-10-20T06:23:19Z

Description

Type of Change

Bug fix (non-breaking change which fixes an issue)

Why

The Text component in React Native Windows Fabric was rendering with a hardcoded black color (D2D1::ColorF::Black) when no color was explicitly specified. This caused text to be invisible or barely visible in dark mode, as black text would render on dark backgrounds, creating a poor user experience and accessibility issues.

This behavior was inconsistent with Windows platform conventions where text should automatically adapt to light/dark themes using semantic colors from the Windows 11 design system.

Resolves #15158

What

Replaced the hardcoded black color with a theme-aware color system following the same pattern as PR #15161 (TextInput placeholder fix):

Added GetDefaultTextColor() function in PlatformColorUtils.h/.cpp:
- Returns TextFillColorPrimary semantic color from Windows 11 design system
- Automatically provides rgba(0,0,0,0.894) in light mode and rgba(255,255,255,1.0) in dark mode
- Handles high contrast mode by using system WindowText color for accessibility compliance
Updated TextDrawing.cpp in two locations:
- Main text brush creation (when textAttributes.foregroundColor is null)
- Fragment brush creation (when fragment.textAttributes.foregroundColor is null)
- Added null safety checks with fallback to black if GetDefaultTextColor() fails
Registered test file in Playground-Composition.cpp:
- Added textColorTest to g_bundleFiles array for easy testing

This ensures Text components automatically adapt to Windows light/dark themes and high contrast modes, providing optimal visibility and accessibility across all scenarios.

Screenshots

Before (Bug):

See attached screen shots here ""

After (Fixed):

Dark mode showing white text adapting to theme:

Light mode showing black text:

Testing

Created comprehensive test file textColorTest.tsx in Playground that reproduces the exact scenario from issue #15158:

Text with no color specified (tests the fix)
Text with explicit green color (tests that hardcoded colors still work)
Text with PlatformColor('TextControlForeground') (tests platform color integration)
Background that adapts to dark/light mode (Add Contributor Covenant Code of Conduct #444 dark, #EEE light)

Test Procedure:

Build and run Playground Composition app
File → Open JavaScript File → Select Samples\textColorTest
Toggle Windows theme: Settings → Personalization → Colors → Choose mode (Light/Dark)
Verify first "Hello World" text changes from black (light mode) to white (dark mode)
Test high contrast mode for accessibility compliance

Verification:

Text with no color renders white in dark mode (visible on Add Contributor Covenant Code of Conduct #444 background)
Text with no color renders black in light mode (visible on #EEE background)
Explicit colors (green) remain unchanged
PlatformColor text adapts to theme
High contrast mode uses system WindowText color

Release Note:
Fixed Text component to use theme-aware colors when no explicit color is specified. Text now automatically adapts between light and dark modes using Windows 11 semantic colors (TextFillColorPrimary), ensuring proper visibility and accessibility across all Windows themes including high contrast mode.

Microsoft Reviewers: Open in CodeFlow

Copilot

Pull Request Overview

This PR fixes a bug where Text components rendered with hardcoded black color regardless of Windows theme, making text invisible in dark mode. The fix implements theme-aware text colors using Windows 11 semantic colors (TextFillColorPrimary), automatically adapting between light mode (black text) and dark mode (white text), with special handling for high contrast accessibility modes.

Key changes:

Added GetDefaultTextColor() function that returns theme-appropriate text colors using Windows 11 design system semantic colors
Updated text rendering logic in two locations to use theme-aware colors instead of hardcoded black when no explicit color is specified
Ensures accessibility compliance by using system WindowText color in high contrast mode

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
`PlatformColorUtils.h`	Declares new `GetDefaultTextColor()` function for theme-aware text color resolution
`PlatformColorUtils.cpp`	Implements `GetDefaultTextColor()` with high contrast handling and `TextFillColorPrimary` semantic color lookup
`TextDrawing.cpp`	Updates text brush creation to use theme-aware default colors instead of hardcoded black in two locations (main text and fragments)
`change/react-native-windows-38df6ceb-14f4-4615-8f66-fd249d0d89ad.json`	Adds change file for versioning and release notes

anupriya13 · 2025-10-22T06:22:24Z

Here text should be white right?

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.

* 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]>

@sharath2727

* More robust handling for Caret color related to Issue 14378 (#15121) * More robust handling for Caret color * Removing Platform brush instead using proper caret brush * Change files * Magic numbers to proper constants and utility function added * Missing header fix. * Resolving PAPER failure with this FABRIC fix. * Putting fix under Macro. * Removing the fabric macro in Fabric code itself. --------- Co-authored-by: Nitin Chaudhary <[email protected]> * TextInput placeholder should uses a theme color (#15161) * Fix for hardcoded Textinput text holder as gray.GIssue:15129 * Change files * yarn lint and format fixes. * Cleaning Up of fix. * RN core behavior match for text holder. --------- Co-authored-by: Nitin Chaudhary <[email protected]> * Enable TSA automatic bug filing for SDL compliance (#15219) * Enable TSA automatic bug filing for SDL compliance - Configure TSA in PostAnalysis task for pre-build compliance tools - Configure TSA in CodeQL3000Finalize for CodeQL security findings - Enable Guardian with TSA options in GuardianCustomConfiguration.json - Set Area Path: OS\Windows Client and Services\WinPD\SPICE\ReactNative - Configure notifications to [email protected] and [email protected] - Resolves work item #58386072 This enables automatic bug filing for all SDL findings from: - CodeQL (C++, C#, TypeScript, JavaScript) - CredScan (credential scanning) - PoliCheck (terminology scanning) - AntiMalware (malware detection) - BinSkim (binary analysis) - Component Governance (OSS detection) * fix: Remove exposed email addresses and standardize TSA bug tags - Replace hardcoded email addresses with environment variables - Use and variables - Standardize bug tags to ['SDL', 'Security'] across all TSA configs - Remove tool-specific tags (Guardian, Compliance, CodeQL) for consistency Addresses review comments from @sharath2727 and Copilot AI --------- Co-authored-by: Nitin Chaudhary <[email protected]> * SDL mandatory warnings (#15220) * SDL mandatory warnings - Configured all 20 SDL mandatory warnings as errors * Change files * Fix SDL Recommended Warnings: Use correct warning numbers per SDL standards - C4287 (was C4245): unsigned/negative constant mismatch - C4365 (was C4389): signed/unsigned mismatch - C4388 (was C4512): signed/unsigned mismatch in comparison - C4545 (was C4102): expression before comma evaluates to function missing argument list - C4546 (was C4254): function call before comma missing argument list - C4547 (was C4306): operator before comma has no effect - C4549 (was C4310): operator before comma has no effect Fixes mismatch between PR description and code implementation. --------- Co-authored-by: Nitin Chaudhary <[email protected]> * Add Symbol Publishing for MSRC Compliance (Work Item 59264834) (#15234) * Add symbol publishing compliance for Work Item 59264834 * Change files --------- Co-authored-by: Nitin Chaudhary <[email protected]> * verify code signatures on installers/updates downloaded from Microsoft (#15241) * Change files * Add signature verification for SDL compliance (Work Item 58386093) --------- Co-authored-by: Nitin Chaudhary <[email protected]> * Security documentation (#15242) * Add comprehensive security documentation for SDL compliance - Add security-configuration.md with MSBuild security settings and SDL compliance matrix - Add security-best-practices.md with secure coding guidelines and Windows API usage - Add security-process.md with security review process and compliance procedures - Update README.md to include security documentation section Addresses Work Item 59264836: SDL requirement for accessible security configuration guidance Policy: Microsoft.Security.CE.10119 - Secure configuration guidance accessibility * Change files * fix(docs): Fix markdown linting errors in security documentation - Fixed 126 markdown linting issues across 3 security documentation files - Added blank lines around headings, lists, and code fences per MD022/MD031/MD032 - Removed trailing spaces and newlines per MD009/MD047 - All security docs now pass markdownlint-cli2 with 0 errors Files fixed: - docs/security-best-practices.md - docs/security-configuration.md - docs/security-process.md Work Item: 59264836 * fix(docs): Correct security documentation links for vnext/README.md - Changed paths from docs/ to ../docs/ to work from vnext directory - vnext/README.md is auto-generated from root README.md during build - Fixes link checker errors in CI build --------- Co-authored-by: Nitin Chaudhary <[email protected]> * SDL powershell injection fix (#15245) * SDL mandatory warnings - Configured all 20 SDL mandatory warnings as errors * Change files * Fix SDL Recommended Warnings: Use correct warning numbers per SDL standards - C4287 (was C4245): unsigned/negative constant mismatch - C4365 (was C4389): signed/unsigned mismatch - C4388 (was C4512): signed/unsigned mismatch in comparison - C4545 (was C4102): expression before comma evaluates to function missing argument list - C4546 (was C4254): function call before comma missing argument list - C4547 (was C4306): operator before comma has no effect - C4549 (was C4310): operator before comma has no effect Fixes mismatch between PR description and code implementation. * Change files * fix(security): Remediate PowerShell injection vulnerabilities (SDL CE.10116) Critical security fix for Work Item 59264835. SECURITY ISSUE: - 5 PowerShell injection vulnerabilities in WindowsStoreAppUtils.ps1 - Could allow arbitrary code execution with elevated privileges - Affects all React Native Windows CLI users FIXES: - Removed all Invoke-Expression calls with user input - Implemented parameterized ScriptBlock pattern for safe execution - Added input validation functions (Validate-PackageIdentifier, Validate-ScriptPath) - Refactored Uninstall-App, EnableDevmode, Install-App functions - Created comprehensive security test suite (35 tests, 100% passing) TESTING: - All injection attempts blocked - Full backward compatibility maintained - No breaking changes - Manual testing completed SDL Compliance: COMPLIANT with Microsoft.Security.CE.10116 --------- Co-authored-by: Nitin Chaudhary <[email protected]> * Theme aware platform color for text. (#15266) * Theme aware platform color for text. * Change files * Fix Text component renders black in dark mode (Fabric) Fixes #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]> * Handling platform color with accent color (#15276) * Handling platform color with accent color * Change files --------- Co-authored-by: Nitin Chaudhary <[email protected]> --------- Co-authored-by: Nitin-100 <[email protected]> Co-authored-by: Nitin Chaudhary <[email protected]>

This reverts commit fbfc00d.

This reverts commit fbfc00d. Co-authored-by: Nitin Chaudhary <[email protected]>

This reverts commit fbfc00d.

* Revert "Theme aware platform color for text. (#15266)" This reverts commit fbfc00d. * Change files --------- Co-authored-by: Nitin Chaudhary <[email protected]>

Theme aware platform color for text.

3307684

Nitin-100 requested a review from a team as a code owner October 20, 2025 06:23

Nitin-100 requested a review from chrisglein October 20, 2025 06:23

Change files

91eb1be

vineethkuttan assigned Nitin-100 Oct 22, 2025

anupriya13 requested review from anupriya13 and Copilot October 22, 2025 06:21

Copilot AI reviewed Oct 22, 2025

View reviewed changes

anupriya13 approved these changes Oct 23, 2025

View reviewed changes

Merge branch 'main' into nitinc/issue/15158

63a979f

Nitin-100 merged commit fbfc00d into microsoft:main Oct 24, 2025
58 checks passed

anupriya13 mentioned this pull request Oct 24, 2025

Cherry pick SDL and TextInput + Theme bugs for release 0.80 #15280

Merged

Nitin-100 mentioned this pull request Oct 29, 2025

Text component renders as black in dark mode #15158

Closed

Nitin-100 pushed a commit to Nitin-100/react-native-windows that referenced this pull request Oct 29, 2025

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

2b01fd6

This reverts commit fbfc00d.

anupriya13 pushed a commit that referenced this pull request Oct 29, 2025

Revert "Theme aware platform color for text. (#15266)" (#15293)

553a13f

This reverts commit fbfc00d. Co-authored-by: Nitin Chaudhary <[email protected]>

Nitin-100 pushed a commit to Nitin-100/react-native-windows that referenced this pull request Oct 29, 2025

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

d62d055

This reverts commit fbfc00d.

anupriya13 pushed a commit that referenced this pull request Oct 29, 2025

Cherry pick revert 15158 0.80 stable (#15294)

220e035

* Revert "Theme aware platform color for text. (#15266)" This reverts commit fbfc00d. * Change files --------- Co-authored-by: Nitin Chaudhary <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Theme aware platform color for text. #15266

Theme aware platform color for text. #15266

Uh oh!

Nitin-100 commented Oct 20, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

anupriya13 commented Oct 22, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Theme aware platform color for text. #15266

Theme aware platform color for text. #15266

Uh oh!

Conversation

Nitin-100 commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Why

What

Screenshots

Before (Bug):

After (Fixed):

Testing

Microsoft Reviewers: Open in CodeFlow

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

anupriya13 commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Nitin-100 commented Oct 20, 2025 •

edited

Loading

anupriya13 commented Oct 22, 2025 •

edited

Loading