Button becomes invisible in dark mode

[sundaramramaswamy]

Problem Description

A plain button with no stylizing becomes invisible in dark mode.

Here's super simple form:

import { View, StyleSheet, Button } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Button title='Hello, World' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Steps To Reproduce

1. Create a sample app
2. Add just one button with a title
3. Toggle dark/light modes
4. Watch the button appear/disappear

Expected Results

The button should be visible in both modes.

CLI version

20.0.0

Environment

System:
  OS: Windows 11 10.0.26200
  CPU: (12) arm64 Snapdragon(R) X 12-core X1E80100 @ 3.40 GHz
  Memory: 38.90 GB / 63.49 GB
Binaries:
  Node:
    version: 25.2.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 3.6.1
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 11.6.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
      - 10.0.26100.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 18.1.11312.151 (Visual Studio Enterprise 2026)
    - 17.14.36811.4 (Visual Studio Enterprise 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.5
    wanted: 0.81.5
  react-native-windows:
    installed: 0.0.0-canary.1020
    wanted: 0.0.0-canary.1020

Community Modules

None

Target React Native Architecture

New Architecture (WinAppSDK) Only

Target Platform Version

10.0.22621

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Screenshots

[Nitin-100]

The bug is that default unstyled components become invisible because their built-in PlatformColors are semi-transparent[mapped in code] and these semi-transparent colors expect a theme-aware app background to composite against.
RNW typically use hardcoded backgrounds (#FFF, #000) or transparent root and in that case Semi-transparent control on wrong background = invisible
Similar case for default SWITCH as well in light theme on black background.

[Nitin-100]

@sundaramramaswamy , I can fix this from the platform side by changing the Button to use solid colors instead of semi-transparent ones.

However, it's worth noting the root cause: WinUI's Fluent Design uses semi-transparent colors intentionally - they are designed to layer on top of theme-aware backgrounds (like Mica or Acrylic). React Native apps don't automatically provide this theme-aware root background, so the 6% white Button becomes invisible when rendered against a non-themed surface.

As a best practice, you can work around this by setting a theme-aware background on your root View:
// React Native should automatically apply this to root:
<View style={{backgroundColor: PlatformColor('SolidBackgroundFillColorBase')}}>
// Now 6% white on dark gray = visible!

[Nitin-100]

As ReactNative Island work you are doing I can suggest doing this:

In ReactNativeIsland::Island() creates the root visual so after creating the SpriteVisual set its brush to the theme's background color
and handle theme changes via changing the brush as per theme.

Please advice.