All docs
V21.1
21.2 (EAP/Beta)
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

How to: Use Palette Resources

  • 7 minutes to read

DevExpress themes allow you to use palette colors as resources in code. You can paint custom controls with the DevExpress Theme colors to make your application’s style consistent.

You can use each palette color as a Color (PaletteColorThemeKey) or a Brush (PaletteBrushThemeKey).

<ThemedWindow ...
    xmlns:dxi="http://schemas.devexpress.com/winfx/2008/xaml/core/internal"
    xmlns:dxt="http://schemas.devexpress.com/winfx/2008/xaml/themes">
    <Button Background="{dxi:ThemeResource {dxt:PaletteBrushThemeKey ResourceKey=Button.Background}}" 
    BorderBrush="{dxi:ThemeResource {dxt:PaletteBrushThemeKey ResourceKey=Border}}"  
    BorderThickness="1" />  
</ThemedWindow>

Example

The code example below demonstrates how to bind the VS2017Blue theme’s Border palette resource to a custom control’s BorderBrush property:

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:local="clr-namespace:WpfApp36"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApp36.MainWindow">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <local:CustomControl1 Grid.Row="0" Margin="5" Text="Custom control binding to a theme name"/>
    </Grid>
</Window>

Add the XPF.Core and VS2017Blue theme references to run this project.

Custom Control palette color binding

View Example

Palette Color List

This section contains palette color names and values.

You can find the theme resource keys in the following files: DevExpressControlsInstallationPath\Components\Sources\DevExpress.Xpf.Themes\Theme_Name\Core\Core\ Themes\Theme_Name\Palettes.xaml DevExpressControlsInstallationPath\Components\Sources\DevExpress.Xpf.Themes\Theme_Name\Core\Core\ Themes\Theme_Name\Palettes_Base.xaml

Win10Light

Show palette colors
Color Name Color Value
Backstage.Button.Background #FFF5F6F7
Backstage.Delimiter #FFD9D9D9
Backstage.Editor.Background #FFFFFFFF
Backstage.Focused #FF0078D7
Backstage.Foreground #FF373737
Backstage.HoverBackground #FFEFEFEF
Backstage.SelectionBackground #FFF7F7F7
Backstage.Window.Background #FFE4E4E4
Border #FFCFCFCF
AltHover #FFCCCCCC
AltPressed #FF666666
Button.Background #FFF4F4F4
Control.Background #FFF5F6F7
Custom.Blue #FF0066CC
Custom.Green #FF00CC66
Custom.Red #FFCC0000
Delimiter #FFD9D9D9
Editor.Background #FFFFFFFF
Focused #FF0078D7
Foreground #FF373737
HighlightedForeground #FFFFFFFF
HoverBackground #FFE5F1FB
HoverBorder #FFCCE8FF
HoverForeground #FF3E3E3E
Item.FadeSelection #FFD9D9D9
Menu.Background #FFFCFCFC
SelectionBackground #FFCCE8FF
SelectionBorder #FF99D1FF
SelectionForeground #FF3E3E3E
Window.Background #FFFFFFFF
Window.CloseButton.HoverBackground #FFE81123
Window.HeaderButton.HoverBackground #FFE5E5E5
Window.HeaderButton.SelectionBackground #FFCCCCCC

Office2019Black

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF444444
Backstage.Delimiter #FF686868
Backstage.Editor.Background #FF262626
Backstage.Focused #FFB5B5B5
Backstage.Foreground #FFFFFFFF
Backstage.HoverBackground #FF444444
Backstage.SelectionBackground #FF6A6A6A
Backstage.Window.Background #FF0A0A0A
Border #FF686868
Button.Background #FF444444
Control.Background #FF2D2D2D
Control.HoverBackground #FF505050
Control.SelectionBackground #FF6A6A6A
ControlLight.Background #FF363636
ControlLight.Foreground #FFDADADA
ControlLight.HoverBackground #FF505050
ControlLight.HoverForeground #FFFFFFFF
ControlLight.SelectionBackground #FF6A6A6A
ControlLight.SelectionForeground #FFFFFFFF
Custom.Blue #FF99CCFF
Custom.Green #FF99FF99
Custom.Red #FFFF9999
Delimiter #FF686868
Editor.Background #FF444444
Editor.Delimiter #FF686868
Focused #FFB5B5B5
Foreground #FFDADADA
ForegroundDark #FF999999
HoverBackground #FF505050
HoverBorder #FF505050
HoverForeground #FFFFFFFF
SelectionBackground #FF6A6A6A
SelectionBorder #FF6A6A6A
SelectionForeground #FFFFFFFF
Window.Background #FF262626
Window.CloseButton.HoverBackground #FFE81123
Window.CloseButton.SelectionBackground #FFF1707A
Window.HeaderButton.HoverBackground #FF444444
Window.HeaderButton.SelectionBackground #FF969696

Office2019Colorful

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF015C9F
Backstage.Delimiter #FF2A8DD4
Backstage.Editor.Background #FF015C9F
Backstage.Focused #FFFFFFFF
Backstage.Foreground #FFFFFFFF
Backstage.HoverBackground #FF2A8AD4
Backstage.SelectionBackground #FF015C9F
Backstage.Window.Background #FF0173C7
Border #FFABABAB
Button.Background #FFFDFDFD
Control.Background #FFF0F0F0
Custom.Blue #FF0026C1
Custom.Green #FF00C126
Custom.Red #FFC12600
Delimiter #FFD5D5D5
Editor.Background #FFFFFFFF
Focused #FF0173C7
Foreground #FF444444
HoverAltBackground #FFCBCACA
HoverAltBorder #FFCBCACA
HoverBackground #FFE6F2FA
HoverBorder #FFE6F2FA
HoverForeground #FF444444
SelectionAltBackground #FFBABAB9
SelectionAltBorder #FFBABAB9
SelectionBackground #FFCDE6F7
SelectionBorder #FFCDE6F7
SelectionForeground #FF444444
Window.Background #FFF8F8F8

Office2019DarkGray

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF363636
Backstage.Delimiter #FF666666
Backstage.Editor.Background #FF363636
Backstage.Focused #FFFFFFFF
Backstage.Foreground #FFEFEFEF
Backstage.HoverBackground #FF0072C6
Backstage.SelectionBackground #FF0072C6
Backstage.Window.Background #FF444444
Border #FF444444
Button.Background #FFD4D4D4
Control.Background #FF605E5C
Control.HoverBackground #FF484848
Control.SelectionBackground #FF303030
ControlLight.Background #FFBEBBB8
ControlLight.Foreground #FF262626
ControlLight.HoverBackground #FF989694
ControlLight.HoverForeground #FF000000
ControlLight.SelectionBackground #FF898785
ControlLight.SelectionForeground #FF000000
Custom.Blue #FF44AFE0
Custom.Green #FF5EA600
Custom.Red #FFFF4A11
Delimiter #FF808080
Editor.Background #FFD4D4D4
Editor.Delimiter #FFC2C2C2
Focused #FF0072C6
Foreground #FFEFEFEF
ForegroundDark #FFC2C2C2
HoverBackground #FF484848
HoverBorder #FF484848
HoverForeground #FFEFEFEF
SelectionBackground #FF444444
SelectionBorder #FF444444
SelectionForeground #FFEFEFEF
Window.Background #FF605E5C
Window.CloseButton.HoverBackground #FFE81123
Window.CloseButton.SelectionBackground #FFF1707A
Window.HeaderButton.SelectionBackground #FF303030

Office2019HighContrast

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF1AEBFF
Backstage.Delimiter #FFFFFFFF
Backstage.Editor.Background #FF1AEBFF
Backstage.Focused #FFFFFFFF
Backstage.Foreground #FFFFFFFF
Backstage.HoverBackground #FF1AEBFF
Backstage.SelectionBackground #FF1AEBFF
Backstage.Window.Background #FF37006E
Border #FFFFFFFF
Button.Background #FF000000
Control.Background #FF000000
Custom.Blue #FF007FFF
Custom.Green #FFB5EEB5
Custom.Red #FFFF0000
Delimiter #FFFFFFFF
Editor.Background #FF000000
Focused #FF1AEBFF
Foreground #FFFFFFFF
HoverBackground #FF1AEBFF
HoverBorder #FF1AEBFF
HoverForeground #FF000000
SelectionBackground #FF1AEBFF
SelectionBorder #FF1AEBFF
SelectionForeground #FF000000
Window.Background #FF000000

Office2019White

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF106EBE
Backstage.Delimiter #FF2A8DD4
Backstage.Editor.Background #FF106EBE
Backstage.Focused #FFFFFFFF
Backstage.Foreground #FFFFFFFF
Backstage.HoverBackground #FF005A9E
Backstage.SelectionBackground #FF004578
Backstage.Window.Background #FF106EBE
Border #FFC8C6C4
Button.Background #FFFCFCFC
Control.Background #FFFFFFFF
Custom.Blue #FF0026C1
Custom.Green #FF00C126
Custom.Red #FFC12600
Delimiter #FFE1DFDD
Editor.Background #FFFFFFFF
Focused #FF106EBE
Foreground #FF444444
HoverBackground #FFEFF6FC
HoverBorder #FFEFF6FC
HoverForeground #FF106EBE
SelectionBackground #FFDEECF9
SelectionBorder #FFDEECF9
SelectionForeground #FF106EBE
Window.Background #FFFFFFFF

VS2019Blue

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF40568D
Backstage.Delimiter #FF5B7199
Backstage.Editor.Background #FF40568D
Backstage.Focused #FFF5CC84
Backstage.Foreground #FFFFFFFF
Backstage.HoverBackground #FFBBC6F1
Backstage.SelectionBackground #FFF5CC84
Backstage.Window.Background #FF5D6B99
Border #FF8E9BBC
Button.Background #FFF2F5FC
Control.Background #FFE9EEFF
Custom.Blue #FF0026C1
Custom.Green #FF00C126
Custom.Red #FFC12600
Delimiter #FFBFC3D9
Editor.Background #FFFFFFFF
Focused #FFF5CC84
Foreground #FF1E1E1E
HoverBackground #FFFBE0B3
HoverBorder #FFE5C365
HoverForeground #FF1E1E1E
SelectionBackground #FFFCD89F
SelectionBorder #FFE5C365
SelectionForeground #FF1E1E1E
Window.Background #FFE9EEFF
Window.CloseButton.HoverBackground #FFFBE0B3
Window.CloseButton.SelectionBackground #FFFCD89F
Window.HeaderButton.HoverBackground #FFFBE0B3
Window.HeaderButton.SelectionBackground #FFFCD89F

VS2019Dark

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF118EDA
Backstage.Delimiter #FF118EDA
Backstage.Editor.Background #FF006EB7
Backstage.Focused #FFFFFFFF
Backstage.Foreground #FFFFFFFF
Backstage.HoverBackground #FF1C97EA
Backstage.SelectionBackground #FF005E9F
Backstage.Window.Background #FF007ACC
Border #FF3F3F46
Button.Background #FF333337
Control.Background #FF252526
Custom.Blue #FFADD8E6
Custom.Green #FF90EE90
Custom.Red #FFFFB6C1
Delimiter #FF3F3F46
Editor.Background #FF333337
Focused #FF007ACC
Foreground #FFF1F1F1
Glyph #FF92929B
HoverBackground #FF3E3E40
HoverBorder #FF3E3E40
HoverForeground #FFFFFFFF
SelectionBackground #FF007ACC
SelectionBorder #FF007ACC
SelectionForeground #FFFFFFFF
Window.Background #FF2D2D30

VS2019Light

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF118EDA
Backstage.Delimiter #FF118EDA
Backstage.Editor.Background #FF006EB7
Backstage.Focused #FFFFFFFF
Backstage.Foreground #FFFFFFFF
Backstage.HoverBackground #FF2E98E0
Backstage.SelectionBackground #FF005E9F
Backstage.Window.Background #FF007ACC
Border #FFCCCEDB
Button.Background #FFF5F5F7
Control.Background #FFF5F5F7
Custom.Blue #FF0026C1
Custom.Green #FF00C126
Custom.Red #FFC12600
Delimiter #FFCCCEDB
Editor.Background #FFFFFFFF
Focused #FF007ACC
Foreground #FF1E1E1E
HoverBackground #FFC9DEF5
HoverBorder #FFC9DEF5
HoverForeground #FF1E1E1E
SelectionBackground #FF007ACC
SelectionBorder #FF007ACC
SelectionForeground #FFFFFFFF
Window.Background #FFEEEEF2

VS2017Blue

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF4D6082
Backstage.Delimiter #FF5B7199
Backstage.Editor.Background #FF364E6F
Backstage.Focused #FFFFFFFF
Backstage.Foreground #FFFFFFFF
Backstage.HoverBackground #FF5B7199
Backstage.SelectionBackground #FF4D6082
Backstage.Window.Background #FF293955
Border #FF8E9BBC
Button.Background #FFDCE0EC
Control.Background #FFCFD6E5
Custom.Blue #FF0026C1
Custom.Green #FF00C126
Custom.Red #FFC12600
Delimiter #FFBDC5D8
Editor.Background #FFFFFFFF
Focused #FFE5C365
Foreground #FF1E1E1E
HoverBackground #FFFDF4BF
HoverBorder #FFE5C365
HoverForeground #FF1E1E1E
SelectionBackground #FFFFF29D
SelectionBorder #FFE5C365
SelectionForeground #FF1E1E1E
Window.Background #FFD6DBE9
Window.CloseButton.HoverBackground #FFFDF4BF
Window.CloseButton.SelectionBackground #FFFFF29D
Window.HeaderButton.HoverBackground #FFFDF4BF
Window.HeaderButton.SelectionBackground #FFFFF29D

VS2017Dark

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF118EDA
Backstage.Delimiter #FF118EDA
Backstage.Editor.Background #FF006EB7
Backstage.Focused #FFFFFFFF
Backstage.Foreground #FFFFFFFF
Backstage.HoverBackground #FF1C97EA
Backstage.SelectionBackground #FF005E9F
Backstage.Window.Background #FF007ACC
Border #FF3F3F46
Button.Background #FF333337
Control.Background #FF252526
Custom.Blue #FFADD8E6
Custom.Green #FF90EE90
Custom.Red #FFFFB6C1
Glyph #FF92929B
Delimiter #FF3F3F46
Editor.Background #FF333337
Focused #FF007ACC
Foreground #FFF1F1F1
HoverBackground #FF3E3E40
HoverBorder #FF3E3E40
HoverForeground #FFFFFFFF
SelectionBackground #FF007ACC
SelectionBorder #FF007ACC
SelectionForeground #FFFFFFFF
Window.Background #FF2D2D30

VS2017Light

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF118EDA
Backstage.Delimiter #FF118EDA
Backstage.Editor.Background #FF006EB7
Backstage.Focused #FFFFFFFF
Backstage.Foreground #FFFFFFFF
Backstage.HoverBackground #FF2E98E0
Backstage.SelectionBackground #FF005E9F
Backstage.Window.Background #FF007ACC
Border #FFCCCEDB
Button.Background #FFF5F5F7
Control.Background #FFF5F5F7
Custom.Blue #FF0026C1
Custom.Green #FF00C126
Custom.Red #FFC12600
Delimiter #FFCCCEDB
Editor.Background #FFFFFFFF
Focused #FF007ACC
Foreground #FF1E1E1E
HoverBackground #FFC9DEF5
HoverBorder #FFC9DEF5
HoverForeground #FF1E1E1E
SelectionBackground #FF007ACC
SelectionBorder #FF007ACC
SelectionForeground #FFFFFFFF
Window.Background #FFEEEEF2

Office2016BlackSE

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF444444
Backstage.Delimiter #FF686868
Backstage.Editor.Background #FF262626
Backstage.Focused #FFB5B5B5
Backstage.Foreground #FFFFFFFF
Backstage.HoverBackground #FF444444
Backstage.SelectionBackground #FF6A6A6A
Backstage.Window.Background #FF0A0A0A
Border #FF686868
Button.Background #FF444444
Control.Background #FF2D2D2D
Control.HoverBackground #FF505050
Control.SelectionBackground #FF6A6A6A
ControlLight.Background #FF363636
ControlLight.Foreground #FFDADADA
ControlLight.HoverBackground #FF505050
ControlLight.HoverForeground #FFFFFFFF
ControlLight.SelectionBackground #FF6A6A6A
ControlLight.SelectionForeground #FFFFFFFF
Custom.Blue #FF99CCFF
Custom.Green #FF99FF99
Custom.Red #FFFF9999
Delimiter #FF686868
Editor.Background #FF444444
Editor.Delimiter #FF686868
Focused #FFB5B5B5
Foreground #FFDADADA
ForegroundDark #FF999999
HoverBackground #FF505050
HoverBorder #FF505050
HoverForeground #FFFFFFFF
SelectionBackground #FF6A6A6A
SelectionBorder #FF6A6A6A
SelectionForeground #FFFFFFFF
Window.Background #FF262626
Window.CloseButton.HoverBackground #FFE81123
Window.CloseButton.SelectionBackground #FFF1707A
Window.HeaderButton.HoverBackground #FF444444
Window.HeaderButton.SelectionBackground #FF969696

Office2016ColorfulSE

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF015C9F
Backstage.Delimiter #FF2A8DD4
Backstage.Editor.Background #FF015C9F
Backstage.Focused #FFFFFFFF
Backstage.Foreground #FFFFFFFF
Backstage.HoverBackground #FF2A8AD4
Backstage.SelectionBackground #FF015C9F
Backstage.Window.Background #FF0173C7
Border #FFABABAB
Button.Background #FFFDFDFD
Control.Background #FFF0F0F0
Custom.Blue #FF0026C1
Custom.Green #FF00C126
Custom.Red #FFC12600
Delimiter #FFD5D5D5
Editor.Background #FFFFFFFF
Focused #FF0173C7
Foreground #FF444444
HoverBackground #FFC5C5C5
HoverBorder #FFC5C5C5
HoverForeground #FF444444
SelectionBackground #FFAEAEAE
SelectionBorder #FFAEAEAE
SelectionForeground #FF444444
Window.Background #FFE6E6E6
Window.CloseButton.HoverBackground #FFE81123
Window.CloseButton.SelectionBackground #FFF1707A
Window.HeaderButton.HoverBackground #FF2A8AD4
Window.HeaderButton.SelectionBackground #FF015C9F

Office2016DarkGraySE

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF363636
Backstage.Delimiter #FF666666
Backstage.Editor.Background #FF363636
Backstage.Focused #FFFFFFFF
Backstage.Foreground #FFEFEFEF
Backstage.HoverBackground #FF575757
Backstage.SelectionBackground #FF303030
Backstage.Window.Background #FF444444
Border #FF444444
Button.Background #FFD4D4D4
Control.Background #FF595959
Control.HoverBackground #FF484848
Control.SelectionBackground #FF303030
ControlLight.Background #FFB2B2B2
ControlLight.Foreground #FF262626
ControlLight.HoverBackground #FF969696
ControlLight.HoverForeground #FF000000
ControlLight.SelectionBackground #FF868686
ControlLight.SelectionForeground #FF000000
Custom.Blue #FF44AFE0
Custom.Green #FF5EA600
Custom.Red #FFFF4A11
Delimiter #FF808080
Editor.Background #FFD4D4D4
Editor.Delimiter #FFC2C2C2
Focused #FF000000
Foreground #FFEFEFEF
ForegroundDark #FFC2C2C2
HoverBackground #FF575757
HoverBorder #FF575757
HoverForeground #FFEFEFEF
SelectionBackground #FF444444
SelectionBorder #FF444444
SelectionForeground #FFEFEFEF
Window.Background #FF666666
Window.CloseButton.HoverBackground #FFE81123
Window.CloseButton.SelectionBackground #FFF1707A
Window.HeaderButton.HoverBackground #FF575757
Window.HeaderButton.SelectionBackground #FF303030

Office2016WhiteSE

Show palette colors
Color Name Color Value
Backstage.Button.Background #FF1664A7
Backstage.Delimiter #FF2A8DD4
Backstage.Editor.Background #FF1664A7
Backstage.Focused #FFFFFFFF
Backstage.Foreground #FFFFFFFF
Backstage.HoverBackground #FF2A8DD4
Backstage.SelectionBackground #FF1664A7
Backstage.Window.Background #FF0072C6
Border #FFD4D4D4
Button.Background #FFFCFCFC
Control.Background #FFFFFFFF
Custom.Blue #FF0026C1
Custom.Green #FF00C126
Custom.Red #FFC12600
Delimiter #FFE1E1E1
Editor.Background #FFFFFFFF
Focused #FF0072C6
Foreground #FF444444
HoverBackground #FFCDE6F7
HoverBorder #FFCDE6F7
HoverForeground #FF0072C6
SelectionBackground #FF92C0E0
SelectionBorder #FF92C0E0
SelectionForeground #FF0072C6
Window.Background #FFFFFFFF