fix(fabric): colors not respecting dark mode appearance, implement platform color by Saadnajmi · Pull Request #2867 · microsoft/react-native-macos

Saad Najmi (Saadnajmi) · 2026-03-22T01:06:53Z

Summary

Fix Fabric renderer not resolving dynamic/semantic colors against the current macOS appearance, causing all colors to render as light mode regardless of system setting (fixes[0.81] Fabric colors don't respect current appearance #2830)
Add complete macOS semantic color dictionary to Fabric (label, text, content, control, window colors, etc.) with Swift-style aliases and fallback support
Add ColorWithSystemEffect support (pressed, disabled, rollover) to Fabric renderer
Add macOS section to PlatformColorExample and a Playground test page for dark mode color verification

Test plan

Built and ran RNTester-macOS with Fabric (new arch) enabled
Verified system colors, semantic colors, DynamicColorMacOS, and ColorWithSystemEffect all respect dark mode
Verified colors update correctly when toggling between Light and Dark appearance
Verified iOS build is not affected (macOS changes are behind TARGET_OS_OSX guards)
Verified visionOS build is not affected

🤖 Generated with Claude Code

Resolve dynamic/semantic colors against the current effective appearance on macOS so that dark mode colors are correctly extracted in the Fabric renderer. Fixesmicrosoft#2830 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add complete macOS semantic color dictionary (label, text, content, control, window colors etc.) and ColorWithSystemEffect support from PR microsoft#2737. Includes Swift-style aliases, fallback colors, array-based color selectors, and PlatformColorExample for RNTester. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

changeset-bot · 2026-03-22T01:06:58Z

⚠️ No Changeset found

Latest commit: 0f55676

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

- Fix bare #endif to use proper #endif // macOS] tags per conventions - Revert Playground and testerStateUtils to upstream defaults (test-only) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- RCTViewComponentView.mm: RCTUIView.updateLayer already resolves dynamic colors via .CGColor when AppKit calls it with the correct appearance context - PlatformColorExample.js: macOS platform color examples already exist in Paper renderer Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Fix #else/#endif comment tags to follow diffs-with-upstream guide - Flip all macOS-first (#if TARGET_OS_OSX) blocks with #else to iOS-first - Remove unnecessary TargetConditionals.h and AppKit.h imports - Add back missing [macOS] tags on modified lines Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

No platform/macos directory exists since all code is inline in platform/ios with #if TARGET_OS_OSX guards. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace manual NSAppearance save/restore with the cleaner performAsCurrentDrawingAppearance API (available since macOS 11.0, our min target is 14.0). This is exception-safe and more readable. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…atform color (microsoft#2867)

…selection, CVEs) (#2876) ## Summary Backport of 10 commits from `main` to `0.81-stable`: - **fix(spm):** fix pre-existing macOS porting bugs (#2869) - **fix(transforms):** enable transforms on new arch and fix hit testing on both arches (#2866) - **chore(deps-dev):** bump undici from 5.29.0 to 6.24.0 (#2871) - **fix(fabric):** colors not respecting dark mode appearance, implement platform color (#2867) - **fix:** adjust content inset behavior for macOS (#2806) - **fix:** reduce dependency CVE overrides and refresh vulnerable transitive deps (#2874) - **feat(fabric, text):** support native text selection when selectable={true} (#2864) - **fix:** macOS ScrollView resize and content inset behavior (#2732) - **docs:** add backporting guide and automation (#2863) - **fix(fabric, textinput):** support `enableFocusRing` ### Conflict resolutions - `RCTUIView.h/m` → On 0.81-stable, `RCTUIView` lives in `React/Base/RCTUIKit.h` and `React/Base/macOS/RCTUIKit.m` (the RCTUIKit module refactor hasn't landed on 0.81). Transform changes were manually applied to these files. - `RCTUIKitCompat.h/m` → `NSColor (RCTAppearanceResolving)` category was added to `RCTUIKit.h/m` instead. - Lockfile conflicts resolved by accepting incoming CVE fixes. ## Test Plan - Same as the original PRs - Verify transforms render correctly on macOS (old + new arch) - Verify dark mode color resolution works in Fabric - Verify ScrollView resize and content inset behavior - Verify text selection with selectable={true} - Verify enableFocusRing on TextInput in Fabric 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: eadron <eadron@users.noreply.github.com> Co-authored-by: Kyle Essenmacher <15271436+kessenma@users.noreply.github.com>

Saad Najmi (Saadnajmi)and others added 2 commits March 21, 2026 17:57

Saad Najmi (Saadnajmi) requested a review from a team as a code owner March 22, 2026 01:06

Saad Najmi (Saadnajmi) changed the title ~~fix(macos): Fabric colors not respecting dark mode appearance~~fix(fabric): Fabric colors not respecting dark mode appearance, implement platform colorMar 22, 2026

Clean up: fix macOS diff tags and remove test-only changes
d19667f
- Fix bare #endif to use proper #endif // macOS] tags per conventions - Revert Playground and testerStateUtils to upstream defaults (test-only) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Saad Najmi (Saadnajmi) mentioned this pull request Mar 22, 2026
feat(fabric): add platform color support #2737
Closed