TextInput with no explicit backgroundColor paints the OS system window color (white strip on dark themes) — TxGetSysColor COLOR_WINDOW falls through to tomAutoColor

[FaithfulAudio]

Problem Description

A <TextInput> with no explicit backgroundColor paints the OS system window color (white under default OS settings) behind its text. In a dark-themed app, every unstyled TextInput shows a white strip. The background tracks the OS light/dark setting, not the app's theme, and ignores the RN default of a transparent/unpainted background.

Root cause — confirmed in 0.83.2 source. In vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp, the ITextHost::TxGetSysColor implementation (line ~334 in the 0.83.2 npm package) initializes cr = (COLORREF)tomAutoColor and, in the COLOR_WINDOW case (~348–351), returns the explicit backgroundColor when set but otherwise falls through to tomAutoColor:

COLORREF TxGetSysColor(int nIndex) override {
  COLORREF cr = (COLORREF)tomAutoColor;
  switch (nIndex) {
    ...
    case COLOR_WINDOW:
      if (m_outer->viewProps()->backgroundColor)
        return (*m_outer->viewProps()->backgroundColor).AsColorRefNoAlpha();
      break;   // <-- falls through to tomAutoColor

RichEdit resolves tomAutoColor for COLOR_WINDOW to the real system window color (white unless the OS is in dark mode). Meanwhile the composition DrawText() path clears to transparent and only fills when backgroundColor is "meaningful" — so the RichEdit-painted system color is what leaks through to the screen.

Candidate fix — we're happy to PR this, pending one piece of guidance. In the COLOR_WINDOW case, when no explicit backgroundColor is set, return a theme-derived background instead of falling through to tomAutoColor, so the input tracks the app's light/dark theme. The adjacent COLOR_WINDOWTEXT case already goes through m_outer->theme()->Color(...) for foreground, so the plumbing exists — what we could not confidently determine from outside the codebase is which theme resource key is the intended default TextInput background (or whether the preferred fix is to make RichEdit paint nothing and let the composition layer own the background entirely). We didn't want to guess at an API in a PR; if a maintainer can point at the preferred accessor/approach, we'll submit the fix.

Steps To Reproduce

1. New-architecture RNW 0.83.2 app with dark-styled UI (most visible when the OS itself is in light mode).
2. Render <TextInput style={{ height: 44, color: 'white' }} /> — note: no backgroundColor.
3. Observe: the input paints an opaque white (system window color) strip behind the text.
4. Control: set any explicit backgroundColor (a dark color) — the strip follows the explicit color, confirming the fall-through is the unstyled path only.

Expected Results

An unstyled TextInput should not paint an opaque OS system color. Expected parity with iOS/Android: transparent (container background shows through) — or at minimum a background derived from the app theme rather than the OS-wide system window color.

CLI version

18.0.0

Environment

System:
  OS: Windows 11 10.0.26200 (ARM64 device; app builds and runs ARM64)
  CPU: (6) x64 Apple Silicon (Windows-on-ARM)
  Memory: 6.49 GB / 15.99 GB
Binaries:
  Node: 22.15.0
  Yarn: 4.5.1
  npm: 10.9.2
SDKs:
  Windows SDK versions: 10.0.19041.0, 10.0.22621.0, 10.0.26100.0
IDEs:
  Visual Studio: 18.6.11822.322 (Community 2026), 17.14.37314.3 (Community 2022)
npmPackages (yarn 4 workspaces — `cli info` reports Not Found in-workspace):
  react-native: 0.83.2
  react-native-windows: 0.83.2 (New Architecture / Fabric composition)
  Microsoft.WindowsAppSDK: 1.8

Community Modules

Not relevant — reproduces with the core TextInput (deep import react-native/Libraries/Components/TextInput/TextInput, no wrapper components).

Target React Native Architecture

New Architecture (WinAppSDK) Only

Target Platform Version

10.0.22621

Visual Studio Version

Visual Studio 2026

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

// Dark screen, unstyled input -> white strip
<View style={{ flex: 1, backgroundColor: '#1e1e1e', padding: 24 }}>
  <TextInput style={{ height: 44, color: 'white', borderWidth: 1, borderColor: '#555' }} />
</View>

Context: found during a Windows hardening pass of a production RNW app (Facilitron FIT — RNW 0.83.2 new-arch, Windows 11 ARM64, WinAppSDK 1.8, daily-driven at 250% display scale). Our production workaround is to force an explicit backgroundColor on every TextInput via the design system. Sibling TextInput/ScrollView fixes from the same investigation: #16302, #16303, #16304.