Color Picker Alpha checkers don't show in light mode

[Avid29]

Describe the bug

The checkers on the ColorPicker alpha channel don't show in light mode because a transparent white is still white over a white background.

Regression

No response

Reproducible in sample app?

• [X] This bug can be reproduced in the sample app.

Steps to reproduce

1. Go to ColorPicker sample
2. Select Light Theme
3. Observe the alpha checkers don't show

Expected behavior

The checkers should inverse colors for light mode.

Screenshots

Windows Build Number

• [ ] Windows 10 1809 (Build 17763)
• [ ] Windows 10 1903 (Build 18362)
• [ ] Windows 10 1909 (Build 18363)
• [ ] Windows 10 2004 (Build 19041)
• [ ] Windows 10 20H2 (Build 19042)
• [ ] Windows 10 21H1 (Build 19043)
• [x] Windows 11 21H2 (Build 22000)
• [ ] Other (specify)

Other Windows Build number

No response

App minimum and target SDK version

• [ ] Windows 10, version 1809 (Build 17763)
• [ ] Windows 10, version 1903 (Build 18362)
• [ ] Windows 10, version 1909 (Build 18363)
• [x] Windows 10, version 2004 (Build 19041)
• [ ] Other (specify)

Other SDK version

No response

Visual Studio Version

No response

Visual Studio Build Number

No response

Device form factor

No response

Nuget packages

No response

Additional context

No response

Help us help you

Yes, but only if others can assist.

[ghost]

Hello Avid29, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[michael-hawker]

@Avid29 looks like you wanted to help out. 🦙❤ What assistance do you need?

[michael-hawker]

I wonder if this was addressed at all in https://github.com/CommunityToolkit/WindowsCommunityToolkit/pull/4502? Maybe if so, we can pull it out of there?

[niels9001]

Thanks @Avid29 ! I was able to reproduce the bug, and it seems that this only happens when switching theme - but once the slider gets moved it sets the right color. Since it's a minor bug and some UI updates being worked on by @robloo (https://github.com/CommunityToolkit/WindowsCommunityToolkit/pull/4502) we'll keep the fix for 8.0 😊.

[robloo]

In this case the slider selection circle is supposed to go back to the default text color (which does contrast correctly with the window background). Something isn't working correctly I think because that functionality was implemented.

[robloo]

This issue disappears as soon as the color value is changed (see video at the end of the comment). This means the DefaultForeground is getting correctly set upon theme changes (XAML looks fine as well).

https://github.com/CommunityToolkit/WindowsCommunityToolkit/blob/7a9bf31975a084338b586d7fdfe3b1e077c8da33/Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.xaml#L121

The issue is the ColorPickerSlider background and foreground colors are calculated in code-behind. So these are not re-evaluated until the color changes. The fix for this is to watch for theme changes in ColorPickerSlider and then call ColorPickerSlider.UpdateColors() internally. The toolkit's ThemeListender might be best used here.

https://user-images.githubusercontent.com/17993847/185769790-0689a029-9ea0-4ca2-8bfc-5dbb65432fe1.mp4