microsoft / microsoft/react-native-windows
Template app doesn't respect Themes/High Contrast mode
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by inspecting the template app's hard-coded colors and the newly added platform color feature, then compare its behavior in Windows dark and high contrast modes. Check whether the generic controls can use platform defaults across Android and iOS, and consider the noted upstream dependency. Done means the template app respects themes and high contrast without incorrect fixed colors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- desktop, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100