search

microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.24k stars 1.14k forks source link

Switch component, when disabled and "on", has incorrect colors in high contrast mode #10713

Open paperbackdragon opened 1 year ago

paperbackdragon commented 1 year ago

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"):

Screenshot 2022-10-10 at 3 18 14 PM

This is a screenshot of the Windows settings app which I think handles the colors more accurately for disabled Switch components:

Screenshot 2022-10-10 at 3 15 25 PM

Steps To Reproduce

  1. Create a Switch component
  2. Pass it disabled={true}
  3. Ensure that value={true}
  4. 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

jonthysell commented 1 year ago

@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?

tgldr commented 1 year ago

I have same issue with background color when disabled and value is false. if disabled is true, background color is being overwritten somewhere.

image