Microsoft-ui-xaml: Question: Why are there hard-coded colours in the individual control templates?

[mdtauk]

Having looked into the code and templates for individual controls, I am noticing a lot of hard coded values, which before WinUI, would have been ThemeResources or StaticResources referring to SolidColorBrushes, which called back on the core System colours which are part of the ColorPaletteResources system.

I know there is conditional XAML which compiles into ResourceDictionaries for each supported version of Windows. But those hard coded colours still appear in these XAML files.

[shaheedmalik]

This would explain with some programs don't respect accent color.

[mdtauk]

This would explain with some programs don't respect accent color.

This is more likely a deliberate choice by the developer, not directly related to what I was asking.

I am talking about things like:

      <SolidColorBrush x:Key="TextBoxForegroundHeaderThemeBrush" Color="#FF000000" />
      <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#AB000000" />
      <SolidColorBrush x:Key="TextBoxBackgroundThemeBrush" Color="#FFFFFFFF" />
      <SolidColorBrush x:Key="TextBoxBorderThemeBrush" Color="#A3000000" />
      <SolidColorBrush x:Key="TextBoxButtonBackgroundThemeBrush" Color="Transparent" />
      <SolidColorBrush x:Key="TextBoxButtonBorderThemeBrush" Color="Transparent" />
      <SolidColorBrush x:Key="TextBoxButtonForegroundThemeBrush" Color="#99000000" />
      <SolidColorBrush x:Key="TextBoxButtonPointerOverBackgroundThemeBrush" Color="#FFDEDEDE" />
      <SolidColorBrush x:Key="TextBoxButtonPointerOverBorderThemeBrush" Color="Transparent" />
      <SolidColorBrush x:Key="TextBoxButtonPointerOverForegroundThemeBrush" Color="Black" />
      <SolidColorBrush x:Key="TextBoxButtonPressedBackgroundThemeBrush" Color="#FF000000" />
      <SolidColorBrush x:Key="TextBoxButtonPressedBorderThemeBrush" Color="Transparent" />
      <SolidColorBrush x:Key="TextBoxButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" />
      <SolidColorBrush x:Key="TextBoxDisabledBackgroundThemeBrush" Color="#66CACACA" />
      <SolidColorBrush x:Key="TextBoxDisabledBorderThemeBrush" Color="#26000000" />
      <SolidColorBrush x:Key="TextBoxDisabledForegroundThemeBrush" Color="#FF666666" />
      <SolidColorBrush x:Key="TextBoxForegroundThemeBrush" Color="#FF000000" />

[jevansaks]

Thanks for raising this, @mdtauk!

Yeah, that just seems like a bug where the control colors aren't following the color ramp. @kikisaints is there any particular reason these might not be using standard colors? I'm guessing not and this should just be changed to be a bug.

[kikisaints]

@jevansaks - missed this one! I'm not sure why these are hard coded... they should all relate to a systemthemebrush. Changing to bug.

[chingucoding]

I would like to fix this issue, however I have tried finding some values on the xaml theme resources list but some hex codes are not present. Am I looking at the wrong place there?

Is there any guidance on how one should replace them with the appropriate brushes? 😅

[mdtauk]

@chingucoding I would suggest you make a list of any values which does not have a corresponding ThemeResource - and maybe they could be added to the core Light and Dark Theme colours.

I mention this proposal because I added some logical colours which are not present in the current resources, and they should all be looked at IMO #920

[chingucoding]

@mdtauk Good idea! I will try to conpile a list by tomorrow.

[chingucoding]

So I have come up with the following list of colors that are hardcoded, that are not present in this list. I have only looked at the theme resources under /dev/CommonStyles .

| File | Key | Theme | Value |
| --- | --- | ----- | ---- |
| AppBarToggleButton_themeresources.xaml | Default | AppBarToggleButtonPointerOverBackgroundThemeBrush | #21FFFFFF |
| AppBarToggleButton_themeresources.xaml | Light | AppBarToggleButtonPointerOverBackgroundThemeBrush | #3D000000 |
| Button_themeresources.xaml | Default | ButtonPointerOverBackgroundThemeBrush | #21FFFFFF |
| Button_themeresources.xaml | Light | ButtonBackgroundThemeBrush | #B3B6B6B6 |
| Button_themeresources.xaml | Light | ButtonDisabledBackgroundThemeBrush | #66CACACA |
| Button_themeresources.xaml | Light | ButtonDisabledBorderThemeBrush | #1A000000 |
| Button_themeresources.xaml | Light | ButtonPointerOverBackgroundThemeBrush | #D1CDCDCD |
| ListBox_themeresources.xaml | Default | ListBoxItemPointerOverBackgroundThemeBrush | #21000000 |
| ListBox_themeresources.xaml | Default | ListBoxItemPressedBackgroundThemeBrush | #FFD3D3D3 |
| ListBox_themeresources.xaml | Default | ListBoxItemSelectedBackgroundThemeBrush | #FF4617B4 |
| ListBox_themeresources.xaml | Default | ListBoxItemSelectedPointerOverBackgroundThemeBrush | #FF5F37BE |
| ListBox_themeresources.xaml | Light | ListBoxItemSelectedPointerOverBackgroundThemeBrush | #45000000 |
| ListBox_themeresources.xaml | Light | ListBoxItemPointerOverBackgroundThemeBrush | #21000000 |
| ListBox_themeresources.xaml | Light | ListBoxItemPressedBackgroundThemeBrush | #FFD3D3D3 |
| ListBox_themeresources.xaml | Light | ListBoxItemSelectedBackgroundThemeBrush | #FF4617B4 |
| ListBox_themeresources.xaml | Light | ListBoxItemSelectedDisabledBackgroundThemeBrush | #8C000000 |
| ListBox_themeresources.xaml | Light | ListBoxItemSelectedPointerOverBackgroundThemeBrush | #FF5F37BE |
| ListView_themeresources.xaml | Default | ListViewItemDragBackgroundThemeBrush | #994617B4 |
| ListView_themeresources.xaml | Default | ListViewItemPlaceholderBackgroundThemeBrush | #FF3D3D3D |
| ListView_themeresources.xaml | Default | ListViewItemPointerOverBackgroundThemeBrush | #4DFFFFFF |
| ListView_themeresources.xaml | Default | ListViewItemSelectedBackgroundThemeBrush | #FF4617B4 |
| ListView_themeresources.xaml | Default | ListViewItemSelectedPointerOverBackgroundThemeBrush | #FF5F37BE |
| ListView_themeresources.xaml | Default | ListViewItemSelectedPointerOverBorderThemeBrush | #FF5F37BE |
| ListView_themeresources.xaml | Light | ListViewItemCheckHintThemeBrush | #FF4617B4 |
| ListView_themeresources.xaml | Light | ListViewItemCheckSelectingThemeBrush | #FF4617B4 |
| ListView_themeresources.xaml | Light | ListViewItemDragBackgroundThemeBrush | #994617B4 |
| ListView_themeresources.xaml | Light | ListViewItemOverlayBackgroundThemeBrush | #A6000000 |
| ListView_themeresources.xaml | Light | ListViewItemPlaceholderBackgroundThemeBrush | #FF3D3D3D |
| ListView_themeresources.xaml | Light | ListViewItemPointerOverBackgroundThemeBrush | #4D000000 |
| ListView_themeresources.xaml | Light | ListViewItemSelectedBackgroundThemeBrush | #FF4617B4 |
| ListView_themeresources.xaml | Light | ListViewItemSelectedPointerOverBackgroundThemeBrush | #FF5F37BE |
| ListView_themeresources.xaml | Light | ListViewItemSelectedPointerOverBorderThemeBrush | #FF5F37BE |
| Progressbar_themeresources.xaml | Default | ProgressBarBackgroundThemeBrush | #59FFFFFF |
| Progressbar_themeresources.xaml | Default | ProgressBarForegroundThemeBrush | #FF5B2EC5 |
| Progressbar_themeresources.xaml | Default | ProgressBarIndeterminateForegroundThemeBrush | #FF8A57FF |
| Progressbar_themeresources.xaml | Light | ProgressBarBackgroundThemeBrush | #30000000 |
| Progressbar_themeresources.xaml | Light | ProgressBarForegroundThemeBrush | #FF4617B4 |
| Progressbar_themeresources.xaml | Light | ProgressBarIndeterminateForegroundThemeBrush | #FF4617B4 |
| TextBox_themeresources.xaml | Default | TextBoxPlaceholderTextThemeBrush | #AB000000 |
| TextBox_themeresources.xaml | Default | TextBoxButtonPointerOverBackgroundThemeBrush | #FFDEDEDE |
| TextBox_themeresources.xaml | Default | TextBoxDisabledForegroundThemeBrush | #FF666666 |
| TextBox_themeresources.xaml | Light | TextBoxPlaceholderTextThemeBrush | #AB000000 |
| TextBox_themeresources.xaml | Light | TextBoxBorderThemeBrush | #A3000000 |
| TextBox_themeresources.xaml | Light | TextBoxButtonForegroundThemeBrush | #99000000 |
| TextBox_themeresources.xaml | Light | TextBoxButtonPointerOverBackgroundThemeBrush | #FFDEDEDE |
| TextBox_themeresources.xaml | Light | TextBoxDisabledBackgroundThemeBrush | #66CACACA |
| TextBox_themeresources.xaml | Light | TextBoxDisabledBorderThemeBrush | #26000000 |
| TextBox_themeresources.xaml | Light | TextBoxDisabledForegroundThemeBrush | #FF666666 |
| ToggleButton_themeresources.xaml | Default | ToggleButtonPointerOverBackgroundThemeBrush | #21FFFFFF |
| ToggleButton_themeresources.xaml | Default | ToggleButtonPointerOverBackgroundThemeBrush | #21000000 |
| ToggleSwitch_themeresources.xaml | Default | ToggleSwitchCurtainBackgroundThemeBrush | #FF5729C1 |
| ToggleSwitch_themeresources.xaml | Default | ToggleSwitchCurtainPointerOverBackgroundThemeBrush | #FF6E46CA |
| ToggleSwitch_themeresources.xaml | Default | ToggleSwitchCurtainPressedBackgroundThemeBrush | #FF7E4FEC |
| ToggleSwitch_themeresources.xaml | Default | ToggleSwitchCurtainPressedBackgroundThemeBrush | #FF7E4FEC |
| ToggleSwitch_themeresources.xaml | Default | ToggleSwitchOuterBorderBorderThemeBrush | #59FFFFFF |
| ToggleSwitch_themeresources.xaml | Default | ToggleSwitchThumbDisabledBackgroundThemeBrush | #FF7E7E7E |
| ToggleSwitch_themeresources.xaml | Default | ToggleSwitchThumbDisabledBorderThemeBrush | #FF7E7E7E |
| ToggleSwitch_themeresources.xaml | Default | ToggleSwitchTrackBackgroundThemeBrush | #42FFFFFF |
| ToggleSwitch_themeresources.xaml | Default | ToggleSwitchTrackDisabledBackgroundThemeBrush | #1FFFFFFF |
| ToggleSwitch_themeresources.xaml | Default | ToggleSwitchTrackPointerOverBackgroundThemeBrush | #4AFFFFFF |
| ToggleSwitch_themeresources.xaml | Default | ToggleSwitchTrackPressedBackgroundThemeBrush | #59FFFFFF |
| ToggleSwitch_themeresources.xaml | Light | ToggleSwitchCurtainBackgroundThemeBrush | #FF4617B4 |
| ToggleSwitch_themeresources.xaml | Light | ToggleSwitchCurtainPointerOverBackgroundThemeBrush | #FF5F37BE |
| ToggleSwitch_themeresources.xaml | Light | ToggleSwitchCurtainPressedBackgroundThemeBrush | #FF7241E4 |
| ToggleSwitch_themeresources.xaml | Light | ToggleSwitchOuterBorderBorderThemeBrush | #59000000 |
| ToggleSwitch_themeresources.xaml | Light | ToggleSwitchThumbDisabledBackgroundThemeBrush | #FF929292 |
| ToggleSwitch_themeresources.xaml | Light | ToggleSwitchThumbDisabledBorderThemeBrush | #FF929292 |
| ToggleSwitch_themeresources.xaml | Light | ToggleSwitchTrackBackgroundThemeBrush | #59000000 |
| ToggleSwitch_themeresources.xaml | Light | ToggleSwitchTrackDisabledBackgroundThemeBrush | #1F000000 |
| ToggleSwitch_themeresources.xaml | Light | ToggleSwitchTrackPointerOverBackgroundThemeBrush | #4A000000 |
| ToggleSwitch_themeresources.xaml | Light | ToggleSwitchTrackPressedBackgroundThemeBrush | #42000000 |

[mdtauk]

Some of those non neutral colours, look like the old Windows 8 purple colour.