microsoft/react-native-gallery

Page Badges aren't easy to see to read in dark mode (nor do they look exactly right in light mode)

Closed this issue · 3 comments

The badges in the corners of the pages don't always match the theme of the app in a way that's readable.

image

image

I've changed the color of the Native Control Badge so that it is distinguishable from the background in light mode. However, I can't seem to test the change in Dark Mode as this is what Gallery looks like for me in Dark Mode:
image

I've tried changing the settings and then cleaning/rebuilding the rngallery solution, as well as rebooting my machine but nothing seems to be working.

Reminder: Check with contrast analyzer tool with Accessibliity Insights as part of this.

Reminder: Check with contrast analyzer tool with Accessibliity Insights as part of this.

@Yajur-Grover FYI

Light mode


image

image

Dark mode


image

image

This implies that the dark mode community module button (white on accent color) needs to be fixed for dark mode.
Which I believe means moving to "TextOnAccentFillColorPrimaryBrush":
image