microsoft / microsoft/react-native-windows

Template app doesn't respect Themes/High Contrast mode

Open
#5,177 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Accessibility Area: PlatformColor Area: Theming Developer First Experience enhancement Quick Task Workstream: Accessibility
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:
CaptureDark

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:

Capture

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.