Fix Button visibility in dark mode (#15521)

[Nitin-100]

Description

When using a simple <Button> component in React Native Windows (New Architecture/Fabric), the button becomes invisible in dark mode:

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',
  },
});

Root Cause

WinUI's Fluent Design system uses semi-transparent colors for controls. For example:

• ControlFillColorDefault (Button background) = 6% white in dark mode
• These colors are designed to be layered on theme-aware backgrounds

In native WinUI apps:

• The window has a theme-aware background (dark gray #202020 in dark mode)
• 6% white on dark gray = visible button (slightly lighter than background)

In React Native Windows:

• The root visual had no background color
• 6% white rendered against whatever the system window provided (often white)
• 6% white on white = invisible button

Solution

This PR adds a theme-aware background color to the ReactNativeIsland root visual using SolidBackgroundFillColorBase:

• Light mode: #F3F3F3 (light gray)
• Dark mode: #202020 (dark gray)

This ensures semi-transparent WinUI control colors render correctly, matching native WinUI app behavior.

Changes

• ReactNativeIsland.cpp: Added UpdateRootVisualBackground() method that sets the theme background
• ReactNativeIsland.h: Declared the new method
• Background is set when theme is initialized and updated when theme changes (light/dark mode switch)

Testing

1. Create a new React Native Windows app (New Architecture)
2. Add a simple Button component with no explicit styling
3. Toggle between light and dark mode
4. Before fix: Button invisible in dark mode
5. After fix: Button visible in both modes

Impact

Breaking Changes

None - This change adds default behavior that matches user expectations and native WinUI apps.

Behavioral Changes

• React Native Windows apps will now have a theme-aware root background by default
• Apps that previously relied on a transparent root background may see a change
• This is the correct behavior matching WinUI app standards

Components Affected

All components using semi-transparent WinUI colors will now render correctly:

• Button (primary fix)
• Disabled Button
• Disabled Switch
• Any custom components using PlatformColor with semi-transparent values

Screenshots

fixed_ddd.mp4

Microsoft Reviewers: Open in CodeFlow

[sundaramramaswamy]

Please fix the below comments. Good otherwise.

[sundaramramaswamy]

Please rename the PR to reflect the actual thing it does: Fix background color in dark mode. The fact that buttons become visible in dark mode due to this change is a side effect. The change itself does nothing about button.

[sundaramramaswamy]

Please bring back and fill-up the release notes section about background colour fixed to respect dark mode now.

[acoates-ms]

This will break Office. We have a bunch of scenarios where we are hosting transparent UI as ReactNative content that forcing a background on will prevent that kind of UI from working.

Maybe we can add a background into the app template above the reactnative island?