Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#16,305 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
48/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
cpp, react-native
Área
desktop-dev, frontend

Línea de trabajo

Comienza en vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp, en ITextHost::TxGetSysColor, y compara después el tratamiento de COLOR_WINDOW y COLOR_WINDOWTEXT con el comportamiento del fondo de DrawText. Determina si el valor predeterminado debe usar un recurso del tema de la aplicación o dejar el pintado en manos de composition, y considera resuelto el problema cuando un TextInput sin estilos deje de mostrar el color de ventana del sistema operativo, mientras los fondos explícitos sigan funcionando.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Needs: Triage :mag:
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.

Lenguaje dominante
C++
Estrellas
17.4k
Forks
1.2k
Merge medio
2 d 17 h
PR fusionados (30 d)
13

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de microsoft/react-native-windows

Todos los issues de microsoft/react-native-windows

Issues similares

Más issues de C++

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.