react-native-windows
react-native-windows copied to clipboard
Switch component, when disabled and "on", has incorrect colors in high contrast mode
Problem Description
In any of the Win 11 high contrast themes, the Switch component has incorrect colors when disabled and in the "on" position. Most importantly, in many of the high contrast themes, the Switch background and the thumb color are very close in color and aren't contrasting enough.
It seems to me like at the least, the background of the Switch should be the same as the window color.
Disabled, Aquatic high contrast theme (The "off" example is fine, the "on" is not and should mirror the same colors as "off"):
This is a screenshot of the Windows settings app which I think handles the colors more accurately for disabled Switch components:
Steps To Reproduce
- Create a Switch component
- Pass it
disabled={true}
- Ensure that
value={true}
- Render the component
Expected Results
Component's colors should be more contrasting.
CLI version
7.0.4
Environment
System:
OS: Windows 10 10.0.25217
CPU: (20) x64 Intel(R) Core(TM) i9-10900K CPU @ 3.70GHz
Memory: 98.76 GB / 127.71 GB
Binaries:
Node: 16.9.1 - D:\CxCache\OneDrive.NodeJS.Windows.1.0.0\tools\nodejs\node.EXE
Yarn: 1.22.11 - D:\CxCache\OneDrive.NodeJS.Windows.1.0.0\tools\nodejs\yarn.CMD
npm: 7.21.1 - D:\CxCache\OneDrive.NodeJS.Windows.1.0.0\tools\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.17134.0, 10.0.18362.0, 10.0.19041.0
IDEs:
Android Studio: Not Found
Visual Studio: 16.11.32901.82 (Visual Studio Enterprise 2019), 17.3.32901.215 (Visual Studio Enterprise 2022)
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.2 => 0.68.2
react-native-windows: 0.68.9 => 0.68.9
npmGlobalPackages:
*react-native*: Not Found
Target Platform Version
No response
Target Device(s)
Desktop
Visual Studio Version
Visual Studio 2019
Build Configuration
Release
Snack, code example, screenshot, or link to a repository
No response
@AgneLukoseviciute Can you look into this? Is this a problem with the Switch XAML control, or in our styling of it? Are we preventing the correct styling from happening in high contrast mode?
I have same issue with background color when disabled and value is false. if disabled is true, background color is being overwritten somewhere.