Template app doesn't respect Themes/High Contrast mode

[kmelmon]

The template app has hard-coded colors baked into it, which means it doesn't respect Windows themes or high contrast mode. This could cause our customers to fall into a pit of failure, as by default the "Hello World" example, which not correct, may end up being copied into real apps.

Here's a screenshot of the app in Dark mode:

Notice it looks like light mode. That ain't right.

In high contrast mode, XAML takes over some of the hard-coded brushes, but not all. Here's a screenshot in high contrast mode:

Notice the TextBlocks are correctly switching to high contrast, but the background of the window is staying white, it should have turned black. There may be some other problems in this page as well.

The overall issue is the hard-coded colors.... We should fix the template app to not do this.

I think fixing this will likely need to happen upstream, tracking this here.

Hopefully we can change the generic, non-XAML controls to use the newly added "platform color" feature. We may also be able to just not set any colors on the real controls and let the native platform use its defaults. This will take some investigation across android/ios.

[chrisglein]

There's one file that contains the colors here. We could fork that and add PlatformColor usage. Do we then upstream that eventually?

This would be a good case of demonstrating PlatformColor.

[NickGerleman]

Someone implemented this upstream already it looks like. facebook/react-native#28711

[NickGerleman]

They did it using Appearance instead of PlatformColor though, so no support with web debugging.

[NickGerleman]

This will be available in 0.64, and will support dark mode but probably not do the right thing with high contrast.