System brushes #fladev

System brushes

What are they?

If you’ve poked around the code that’s generated by the various “Metro style” C#/XAML or VB/XAML templates in Visual Studio, you’ve seen mysterious resource references like:

<Setter Property="Background"
    Value="{StaticResource ApplicationPageBackgroundThemeBrush}"/>

ApplicationPageBackgroundThemeBrush isn’t declared anywhere in your project; it’s actually defined implicitly by the Windows runtime. The same is true of any resource whose name ends in ThemeBrush.

The visual designers in Blend and Visual Studio refer to these as “system brush resources”, and they refer to all the various colors that are defined by the Metro “Light” and “Dark” themes. Their meaning changes depending on which theme your app requests.

List of system brushes

If you search the Web for any of these brush names, you won’t find any hits on MSDN. Even though these colors feature prominently in the Metro-style templates, Microsoft hasn’t yet documented these system brushes in any way (apart from putting a list of their names in the Properties window, but that makes a lousy reference manual).

Below is the documentation Microsoft forgot. This list is complete as of the Release Preview.

Resource name Dark theme Light theme
AppBarBackgroundThemeBrush
#E5000000
#FFFFFFFF
AppBarBorderThemeBrush
#E5000000
#FFFFFFFF
AppBarItemBackgroundThemeBrush
#00FFFFFF
AppBarItemDisabledForegroundThemeBrush
#66FFFFFF
#66000000
AppBarItemForegroundThemeBrush
#FFFFFFFF
#FF000000
AppBarItemPointerOverBackgroundThemeBrush
#21FFFFFF
#3D000000
AppBarItemPointerOverForegroundThemeBrush
#FFFFFFFF
#FF000000
AppBarItemPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
ApplicationForegroundThemeBrush
#DEFFFFFF
#DE000000
ApplicationPageBackgroundThemeBrush
#FF1D1D1D
#FFF4F4F4
ApplicationPointerOverForegroundThemeBrush
#FFFFFFFF
#73000000
ApplicationPressedForegroundThemeBrush
#FF5AB7E3
ApplicationSecondaryForegroundThemeBrush
#99FFFFFF
#99000000
BackButtonBackgroundThemeBrush
#00FFFFFF
BackButtonDisabledForegroundThemeBrush
#66FFFFFF
#66000000
BackButtonForegroundThemeBrush
#FFFFFFFF
#FF000000
BackButtonPointerOverBackgroundThemeBrush
#21FFFFFF
#3D000000
BackButtonPointerOverForegroundThemeBrush
#FFFFFFFF
#FF000000
BackButtonPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
ButtonBackgroundThemeBrush
#00FFFFFF
#B3B6B6B6
ButtonBorderThemeBrush
#FFFFFFFF
#33000000
ButtonDisabledBackgroundThemeBrush
#00FFFFFF
#66CACACA
ButtonDisabledBorderThemeBrush
#66FFFFFF
#1A000000
ButtonDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ButtonForegroundThemeBrush
#FFFFFFFF
#FF000000
ButtonPointerOverBackgroundThemeBrush
#21FFFFFF
#D1CDCDCD
ButtonPointerOverForegroundThemeBrush
#FFFFFFFF
#FF000000
ButtonPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
ButtonPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
CheckBoxBackgroundThemeBrush
#CCFFFFFF
CheckBoxBorderThemeBrush
#CCFFFFFF
#45000000
CheckBoxContentDisabledForegroundThemeBrush
#66FFFFFF
#66000000
CheckBoxContentForegroundThemeBrush
#FFFFFFFF
#FF000000
CheckBoxDisabledBackgroundThemeBrush
#66FFFFFF
#66CACACA
CheckBoxDisabledBorderThemeBrush
#66FFFFFF
#66000000
CheckBoxDisabledForegroundThemeBrush
#66000000
CheckBoxForegroundThemeBrush
#FF000000
CheckBoxPointerOverBackgroundThemeBrush
#DEFFFFFF
CheckBoxPointerOverBorderThemeBrush
#DEFFFFFF
#70000000
CheckBoxPointerOverForegroundThemeBrush
#FF000000
CheckBoxPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
CheckBoxPressedBorderThemeBrush
#FFFFFFFF
#FF000000
CheckBoxPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
ComboBoxArrowDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ComboBoxArrowForegroundThemeBrush
#FF000000
ComboBoxArrowPressedForegroundThemeBrush
#FF000000
ComboBoxBackgroundThemeBrush
#CCFFFFFF
ComboBoxBorderThemeBrush
#CCFFFFFF
#45000000
ComboBoxDisabledBackgroundThemeBrush
#00FFFFFF
#66CACACA
ComboBoxDisabledBorderThemeBrush
#66FFFFFF
#66000000
ComboBoxDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ComboBoxFocusedBackgroundThemeBrush
#FFFFFFFF
ComboBoxFocusedBorderThemeBrush
#FFFFFFFF
#70000000
ComboBoxFocusedForegroundThemeBrush
#FFFFFFFF
ComboBoxForegroundThemeBrush
#FF000000
ComboBoxItemDisabledForegroundThemeBrush
#66000000
ComboBoxItemPointerOverBackgroundThemeBrush
#21000000
ComboBoxItemPointerOverForegroundThemeBrush
#FF000000
ComboBoxItemPressedBackgroundThemeBrush
#FFD3D3D3
ComboBoxItemPressedForegroundThemeBrush
#FF000000
ComboBoxItemSelectedBackgroundThemeBrush
#FF4617B4
ComboBoxItemSelectedDisabledBackgroundThemeBrush
#8C000000
ComboBoxItemSelectedDisabledForegroundThemeBrush
#99FFFFFF
ComboBoxItemSelectedForegroundThemeBrush
#FFFFFFFF
ComboBoxItemSelectedPointerOverBackgroundThemeBrush
#FF5F37BE
ComboBoxPointerOverBackgroundThemeBrush
#DEFFFFFF
ComboBoxPointerOverBorderThemeBrush
#DEFFFFFF
#70000000
ComboBoxPopupBackgroundThemeBrush
#FFFFFFFF
ComboBoxPopupBorderThemeBrush
#FF212121
ComboBoxPopupForegroundThemeBrush
#FF000000
ComboBoxPressedBackgroundThemeBrush
#FFFFFFFF
ComboBoxPressedBorderThemeBrush
#FFFFFFFF
#A3000000
ComboBoxPressedForegroundThemeBrush
#FF000000
ComboBoxPressedHighlightThemeBrush
#FFD3D3D3
ComboBoxSelectedBackgroundThemeBrush
#FF4617B4
ComboBoxSelectedPointerOverBackgroundThemeBrush
#FF5F37BE
DefaultTextForegroundThemeBrush
#FFFFFFFF
#FF000000
FlipViewButtonBackgroundThemeBrush
#59D5D5D5
FlipViewButtonBorderThemeBrush
#59D5D5D5
FlipViewButtonForegroundThemeBrush
#99000000
FlipViewButtonPointerOverBackgroundThemeBrush
#F0D7D7D7
FlipViewButtonPointerOverBorderThemeBrush
#9EC1C1C1
FlipViewButtonPointerOverForegroundThemeBrush
#FF000000
FlipViewButtonPressedBackgroundThemeBrush
#BD292929
FlipViewButtonPressedBorderThemeBrush
#BD292929
FlipViewButtonPressedForegroundThemeBrush
#FFFFFFFF
FocusVisualBlackStrokeThemeBrush
#FF000000
FocusVisualWhiteStrokeThemeBrush
#FFFFFFFF
HyperlinkButtonBackgroundThemeBrush
#00FFFFFF
HyperlinkButtonBorderThemeBrush
#00FFFFFF
HyperlinkDisabledThemeBrush
#66FFFFFF
#66000000
HyperlinkForegroundThemeBrush
#FF9C72FF
#FF4F1ACB
HyperlinkPointerOverForegroundThemeBrush
#CC9C72FF
#CC4F1ACB
HyperlinkPressedForegroundThemeBrush
#999C72FF
#994F1ACB
ListBoxBackgroundThemeBrush
#CCFFFFFF
ListBoxBorderThemeBrush
#00FFFFFF
#45000000
ListBoxDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ListBoxFocusBackgroundThemeBrush
#FFFFFFFF
ListBoxForegroundThemeBrush
#FF000000
ListBoxItemDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ListBoxItemPointerOverBackgroundThemeBrush
#21000000
ListBoxItemPointerOverForegroundThemeBrush
#FF000000
ListBoxItemPressedBackgroundThemeBrush
#FFD3D3D3
ListBoxItemPressedForegroundThemeBrush
#FF000000
ListBoxItemSelectedBackgroundThemeBrush
#FF4617B4
ListBoxItemSelectedDisabledBackgroundThemeBrush
#66FFFFFF
#8C000000
ListBoxItemSelectedDisabledForegroundThemeBrush
#99000000
#99FFFFFF
ListBoxItemSelectedForegroundThemeBrush
#FFFFFFFF
ListBoxItemSelectedPointerOverBackgroundThemeBrush
#FF5F37BE
ListViewItemCheckHintThemeBrush
#FFFFFFFF
#FF4617B4
ListViewItemCheckSelectingThemeBrush
#FFFFFFFF
#FF4617B4
ListViewItemCheckThemeBrush
#FFFFFFFF
ListViewItemDragBackgroundThemeBrush
#994617B4
ListViewItemDragForegroundThemeBrush
#FFFFFFFF
ListViewItemFocusBorderThemeBrush
#FFFFFFFF
#FF000000
ListViewItemOverlayBackgroundThemeBrush
#A6000000
ListViewItemOverlayForegroundThemeBrush
#FFFFFFFF
ListViewItemOverlaySecondaryForegroundThemeBrush
#99FFFFFF
ListViewItemPlaceholderBackgroundThemeBrush
#FF3D3D3D
ListViewItemPointerOverBackgroundThemeBrush
#4DFFFFFF
#4D000000
ListViewItemSelectedBackgroundThemeBrush
#FF4617B4
ListViewItemSelectedPointerOverBackgroundThemeBrush
#FF5F37BE
ListViewItemSelectedPointerOverBorderThemeBrush
#FF5F37BE
ProgressBarBackgroundThemeBrush
#59FFFFFF
#30000000
ProgressBarBorderThemeBrush
#00FFFFFF
ProgressBarForegroundThemeBrush
#FF5B2EC5
#FF4617B4
ProgressBarIndeterminateForegroundThemeBrush
#FF8A57FF
#FF4617B4
RadioButtonBackgroundThemeBrush
#CCFFFFFF
RadioButtonBorderThemeBrush
#CCFFFFFF
#45000000
RadioButtonContentDisabledForegroundThemeBrush
#66FFFFFF
#66000000
RadioButtonContentForegroundThemeBrush
#FFFFFFFF
#FF000000
RadioButtonDisabledBackgroundThemeBrush
#66FFFFFF
#66CACACA
RadioButtonDisabledBorderThemeBrush
#66FFFFFF
#66000000
RadioButtonDisabledForegroundThemeBrush
#66000000
RadioButtonForegroundThemeBrush
#FF000000
RadioButtonPointerOverBackgroundThemeBrush
#DEFFFFFF
RadioButtonPointerOverBorderThemeBrush
#DEFFFFFF
#70000000
RadioButtonPointerOverForegroundThemeBrush
#FF000000
RadioButtonPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
RadioButtonPressedBorderThemeBrush
#FFFFFFFF
#FF000000
RadioButtonPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
RepeatButtonBorderThemeBrush
#FFFFFFFF
#33000000
RepeatButtonDisabledBackgroundThemeBrush
#00FFFFFF
#66CACACA
RepeatButtonDisabledBorderThemeBrush
#66FFFFFF
#1A000000
RepeatButtonDisabledForegroundThemeBrush
#66FFFFFF
#66000000
RepeatButtonForegroundThemeBrush
#FFFFFFFF
#FF000000
RepeatButtonPointerOverBackgroundThemeBrush
#21FFFFFF
#D1CDCDCD
RepeatButtonPointerOverForegroundThemeBrush
#FFFFFFFF
#FF000000
RepeatButtonPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
RepeatButtonPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
ScrollBarButtonForegroundThemeBrush
#99000000
ScrollBarButtonPointerOverBackgroundThemeBrush
#FFDADADA
ScrollBarButtonPointerOverBorderThemeBrush
#FFDADADA
ScrollBarButtonPointerOverForegroundThemeBrush
#FF000000
ScrollBarButtonPressedBackgroundThemeBrush
#99000000
ScrollBarButtonPressedBorderThemeBrush
#99000000
ScrollBarButtonPressedForegroundThemeBrush
#FFFFFFFF
ScrollBarPanningBackgroundThemeBrush
#FFCDCDCD
ScrollBarPanningBorderThemeBrush
#7D9A9A9A
ScrollBarThumbBackgroundThemeBrush
#FFCDCDCD
ScrollBarThumbBorderThemeBrush
#3B555555
ScrollBarThumbPointerOverBackgroundThemeBrush
#FFDADADA
ScrollBarThumbPointerOverBorderThemeBrush
#6BB7B7B7
ScrollBarThumbPressedBackgroundThemeBrush
#99000000
ScrollBarThumbPressedBorderThemeBrush
#ED555555
ScrollBarTrackBackgroundThemeBrush
#59D5D5D5
ScrollBarTrackBorderThemeBrush
#59D5D5D5
SliderBorderThemeBrush
#00FFFFFF
SliderDisabledBorderThemeBrush
#00FFFFFF
SliderThumbBackgroundThemeBrush
#FFFFFFFF
#FF000000
SliderThumbBorderThemeBrush
#FFFFFFFF
#FF000000
SliderThumbDisabledBackgroundThemeBrush
#FF7E7E7E
#FF929292
SliderThumbPointerOverBackgroundThemeBrush
#FFFFFFFF
#FF000000
SliderThumbPointerOverBorderThemeBrush
#FFFFFFFF
#FF000000
SliderThumbPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
SliderThumbPressedBorderThemeBrush
#FFFFFFFF
#FF000000
SliderTickMarkInlineBackgroundThemeBrush
#FF000000
#FFFFFFFF
SliderTickMarkInlineDisabledForegroundThemeBrush
#FF000000
#FFFFFFFF
SliderTickmarkOutsideBackgroundThemeBrush
#80FFFFFF
#80000000
SliderTickMarkOutsideDisabledForegroundThemeBrush
#80FFFFFF
#80000000
SliderTrackBackgroundThemeBrush
#29FFFFFF
#1A000000
SliderTrackDecreaseBackgroundThemeBrush
#FF5B2EC5
#FF4617B4
SliderTrackDecreaseDisabledBackgroundThemeBrush
#1FFFFFFF
#1C000000
SliderTrackDecreasePointerOverBackgroundThemeBrush
#FF724BCD
#FF5F37BE
SliderTrackDecreasePressedBackgroundThemeBrush
#FF8152EF
#FF7241E4
SliderTrackDisabledBackgroundThemeBrush
#29FFFFFF
#1A000000
SliderTrackPointerOverBackgroundThemeBrush
#46FFFFFF
#26000000
SliderTrackPressedBackgroundThemeBrush
#59FFFFFF
#33000000
TextBoxBackgroundThemeBrush
#FFFFFFFF
TextBoxBorderThemeBrush
#FFFFFFFF
#A3000000
TextBoxButtonBackgroundThemeBrush
#00FFFFFF
TextBoxButtonBorderThemeBrush
#00FFFFFF
TextBoxButtonForegroundThemeBrush
#FF000000
TextBoxButtonPointerOverBackgroundThemeBrush
#FFDEDEDE
TextBoxButtonPointerOverBorderThemeBrush
#00FFFFFF
TextBoxButtonPointerOverForegroundThemeBrush
#FF000000
TextBoxButtonPressedBackgroundThemeBrush
#FF000000
TextBoxButtonPressedBorderThemeBrush
#00FFFFFF
TextBoxButtonPressedForegroundThemeBrush
#FFFFFFFF
TextBoxDisabledBackgroundThemeBrush
#00FFFFFF
#66CACACA
TextBoxDisabledBorderThemeBrush
#66FFFFFF
#26000000
TextBoxDisabledForegroundThemeBrush
#FF666666
TextBoxForegroundThemeBrush
#FF000000
ThumbBackgroundThemeBrush
#FFCDCDCD
ThumbBorderThemeBrush
#3B555555
ThumbPointerOverBackgroundThemeBrush
#FFDADADA
ThumbPointerOverBorderThemeBrush
#6BB7B7B7
ThumbPressedBackgroundThemeBrush
#99000000
ThumbPressedBorderThemeBrush
#ED555555
ToggleButtonBackgroundThemeBrush
#00FFFFFF
ToggleButtonBorderThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonCheckedBackgroundThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonCheckedBorderThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonCheckedDisabledBackgroundThemeBrush
#66FFFFFF
#66000000
ToggleButtonCheckedDisabledForegroundThemeBrush
#FF000000
#FFFFFFFF
ToggleButtonCheckedForegroundThemeBrush
#FF000000
#FFFFFFFF
ToggleButtonCheckedPointerOverBackgroundThemeBrush
#99FFFFFF
#99000000
ToggleButtonCheckedPointerOverBorderThemeBrush
#99FFFFFF
#99000000
ToggleButtonCheckedPressedBackgroundThemeBrush
#00FFFFFF
ToggleButtonCheckedPressedBorderThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonCheckedPressedForegroundThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonDisabledBorderThemeBrush
#66FFFFFF
#66000000
ToggleButtonDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ToggleButtonForegroundThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonPointerOverBackgroundThemeBrush
#21FFFFFF
#21000000
ToggleButtonPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
ToggleButtonPressedForegroundThemeBrush
#FF000000
#FFFFFFFF
ToggleSwitchCurtainBackgroundThemeBrush
#FF5729C1
#FF4617B4
ToggleSwitchCurtainDisabledBackgroundThemeBrush
#00FFFFFF
ToggleSwitchCurtainPointerOverBackgroundThemeBrush
#FF6E46CA
#FF5F37BE
ToggleSwitchCurtainPressedBackgroundThemeBrush
#FF7E4FEC
#FF7241E4
ToggleSwitchDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ToggleSwitchForegroundThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchHeaderDisabledForegroundThemeBrush
#66FFFFFF
#66000000
ToggleSwitchHeaderForegroundThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchOuterBorderBorderThemeBrush
#59FFFFFF
#59000000
ToggleSwitchOuterBorderDisabledBorderThemeBrush
#33FFFFFF
#33000000
ToggleSwitchThumbBackgroundThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchThumbBorderThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchThumbDisabledBackgroundThemeBrush
#FF7E7E7E
#FF929292
ToggleSwitchThumbDisabledBorderThemeBrush
#FF7E7E7E
#FF929292
ToggleSwitchThumbPointerOverBackgroundThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchThumbPointerOverBorderThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchThumbPressedBackgroundThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchThumbPressedForegroundThemeBrush
#FFFFFFFF
#FF000000
ToggleSwitchTrackBackgroundThemeBrush
#42FFFFFF
#59000000
ToggleSwitchTrackBorderThemeBrush
#00FFFFFF
ToggleSwitchTrackDisabledBackgroundThemeBrush
#1FFFFFFF
#1F000000
ToggleSwitchTrackPointerOverBackgroundThemeBrush
#4AFFFFFF
#4A000000
ToggleSwitchTrackPressedBackgroundThemeBrush
#59FFFFFF
#42000000
ToolTipBackgroundThemeBrush
#FFFFFFFF
ToolTipBorderThemeBrush
#FF808080
ToolTipForegroundThemeBrush
#FF666666
Advertisements