Palettes

• Mar 01, 2024
• 8 minutes to read

Palettes allow you to integrate colors (for example, corporate colors) into your application and customize colors used in themes. You can create a custom palette or use predefined palettes in this instance.

The Palette is a list of named colors. Each color has a ColorName value and a Color value. You can use the ColorName to assign a Color to any number of UI elements:

Tip

You can use the WPF Theme Designer to edit a palette color or bind it to a UI element.

Themes that Contain Palettes

Theme Family	Themes
Windows 10	Dark, Light
Office 2019	Black, Colorful, Dark Gray, White, HighContrast
Visual Studio 2019	Blue, Dark, Light
Office 2016 SE	Black, Colorful, Dark Gray, White
Visual Studio 2017	Blue, Dark, Light

Predefined Palettes

Palette Themes include the following predefined palettes:

Supported Themes	Predefined Palette
Win10	Win10Palette
Office 2016 SE, Visual Studio 2017, Office 2019, Visual Studio 2019	EnhancedContrast
Office 2016 SE, Visual Studio 2017, Office 2019	Brickwork
Office 2016 SE, Visual Studio 2017, Office 2019	CobaltBlue
Office 2016 SE, Visual Studio 2017, Office 2019	DarkLilac
Office 2016 SE, Visual Studio 2017, Office 2019	RedWine
Office 2016 SE, Visual Studio 2017, Office 2019	SpruceLeaves
Office 2016 SE, Visual Studio 2017, Office 2019	Turquoise
VS2019Blue	Latte
VS2019Blue	Navy
VS2019Dark	BlueberryCake
VS2019Dark	DeepSea
VS2019Dark	Dimmed
VS2019Dark	Sand
VS2019Dark	Storm
VS2019Light	Berberis
VS2019Light	Cornflower
VS2019Light	EmeraldSea
VS2019Light	LightLilac
VS2019Light	Loft

Apply a Palette in Code

Note

The application does not unload the loaded theme assemblies when you switch themes.

1. Reference the Mono.cecil NuGet package in your project.
2. Call the Theme.RegisterPredefinedPaletteThemes method to enable predefined palettes.

3. Set the ApplicationThemeHelper.ApplicationThemeName property to the desired predefined palette name and base theme name combination.

   C#

   Theme.RegisterPredefinedPaletteThemes();
   ApplicationThemeHelper.ApplicationThemeName = PredefinedThemePalettes.RedWine.Name + Theme.Office2019White.Name;
   

   VB.NET

   Theme.RegisterPredefinedPaletteThemes()
   ApplicationThemeHelper.ApplicationThemeName = PredefinedThemePalettes.RedWine.Name + Theme.Office2019White.Name
   

Tip

You can use the Theme.CachePaletteThemes property to cache the current palette theme assembly. The cache reduces load times in future application runs.

The code sample above enables all available palettes for the current theme. To enable and apply a single palette:

1. Reference the Mono.cecil NuGet package in your project.
2. Pass the palette and a base theme to the Theme.CreateTheme method to create a new theme.
3. Pass the theme to the Theme.RegisterTheme method.

4. Set the ApplicationThemeHelper.ApplicationThemeName property to the theme name.

   C#

   var palettetheme = Theme.CreateTheme(PredefinedThemePalettes.RedWine, Theme.Office2019White); 
   Theme.RegisterTheme(palettetheme); 
   ApplicationThemeHelper.ApplicationThemeName = palettetheme.Name;
   

   VB.NET

   Dim palettetheme = Theme.CreateTheme(PredefinedThemePalettes.RedWine, Theme.Office2019White)
   Theme.RegisterTheme(palettetheme)
   ApplicationThemeHelper.ApplicationThemeName = palettetheme.Name
   

Apply a Palette to a Touch Theme

1. Pass a palette and a non-touch version of a theme to the Theme.CreateTheme method.
2. Append the ;Touch suffix to the application theme name and apply the theme.

The following code sample applies the Office2019BlackTouch with the TouchPalette to an application:

C#

var palette = new ThemePalette("TouchPalette");
var theme = Theme.CreateTheme(palette, Theme.Office2019Black);
Theme.RegisterTheme(theme);
ApplicationThemeHelper.ApplicationThemeName = theme.Name + ";Touch";

VB.NET

Dim palette = New ThemePalette("TouchPalette")
Dim theme = Theme.CreateTheme(palette, Theme.Office2019Black)
Theme.RegisterTheme(theme)
ApplicationThemeHelper.ApplicationThemeName = theme.Name & ";Touch"

Display Palettes in the Ribbon Gallery

You can display predefined palettes in the Ribbon Gallery to allow users to select a palette and apply it to the current theme:

View Example: How to Implement a Theme Palette Selector Based on a Bar Item

1. Reference the DevExpress.Mvvm.v24.2.dll assembly.

2. Call the Theme.RegisterPredefinedPaletteThemes method at application startup to enable these palettes:

   C#

   public partial class App : Application {
       protected override void OnStartup(StartupEventArgs e) {
           Theme.RegisterPredefinedPaletteThemes();
           base.OnStartup(e);
       }
   }
   

   VB.NET

   Public Partial Class App
   Inherits Application
       Protected Overrides Sub OnStartup(ByVal e As StartupEventArgs)
           Theme.RegisterPredefinedPaletteThemes()
           MyBase.OnStartup(e)
       End Sub
   End Class
   

3. Attach the RibbonGalleryItemThemePaletteSelectorBehavior to a RibbonGalleryBarItem:

   XAML

   <dxr:RibbonGalleryBarItem ... >
       <dxmvvm:Interaction.Behaviors>
           <dxr:RibbonGalleryItemThemePaletteSelectorBehavior />
       </dxmvvm:Interaction.Behaviors>
   </dxr:RibbonGalleryBarItem>
   

Use Windows Accent Color and App Mode

Pass a Win10Palette object as a parameter to any Theme.CreateTheme method to generate a theme based on a Win10Dark or Win10Light DevExpress theme. The palette allows you to get the following Windows theme settings, listen to their changes, and apply them to your application:

• Accent color
• App mode (Dark/Light)^[1]

Refer to the following Microsoft help topic for more information: Change colors in Windows.

The Win10Palette works with Windows 10 and higher.

The code sample below creates a theme with colors based on Windows settings and applies it to an application on startup:

C#

protected override void OnStartup(StartupEventArgs e) {
    var palette = new Win10Palette(true);
    var theme = Theme.CreateTheme(palette);
    Theme.RegisterTheme(theme);
    ApplicationThemeHelper.ApplicationThemeName = theme.Name;
    base.OnStartup(e);
}

VB.NET

Protected Overrides Sub OnStartup(ByVal e As StartupEventArgs)
    Dim palette = New Win10Palette()
    Dim theme = Theme.CreateTheme(palette)
    Theme.RegisterTheme(theme)
    ApplicationThemeHelper.ApplicationThemeName = theme.Name
    MyBase.OnStartup(e)
End Sub

Manage Palette Settings

When creating a Win10Palette instance, you can use the following constructor parameters to manage palette settings:

accentColor

Specifies a palette accent color. If the palette cannot find a Windows accent color, the application accent color is set to #FF0078D7.

listenAccentColorChanges

Specifies whether to get or ignore Windows accent color changes.

If true, the Win10Palette performs the following actions when a user changes an accent color in Windows:

• Gets a Windows accent color.
• Creates a theme with the accent color.
• Applies the theme to an application.

If false, the Win10Palette ignores Windows accent color changes.

appMode

Specifies the app mode. If the palette cannot find a Windows app mode, the application app mode is set to Light.

listenAppModeChanges

Specifies whether to get or ignore Windows app mode changes.

If true, the Win10Palette performs the following actions when a user changes an accent color in Windows:

• Gets a Windows app mode.
• Creates a theme that is based on a Dark/Light theme (depending on the selected Windows app mode).
• Applies the theme to an application.

If false, the Win10Palette ignores Windows app mode changes.

Display Windows System Color Theme

DevExpress WPF Controls include the System Color theme. This theme takes the Windows app mode and accent color settings, applies it to your application, and updates your app appearance when a user changes these OS settings. You can display the System Color theme in the following theme selectors:

• BarSubItemThemeSelectorBehavior
• BarSplitItemThemeSelectorBehavior
• RibbonGalleryItemThemeSelectorBehavior
• GalleryThemeSelectorBehavior
• HamburgerSubMenuThemeSelectorBehavior

To display the Windows 10 System Colors theme in a theme selector, set the inherited ShowWin10SystemColorTheme property to true.

Custom Palettes

For more information on how to create a custom theme palette, refer to the following WPF Theme Designer help topic: Edit Palette Colors.

You can export your palette in the following ways:

• As a custom theme.

  Topic: Build and Export New Themes in the WPF Theme Designer.

• As a class (.cs file).

  Topic: Export a Palette from the WPF Theme Designer.

• Repeat changes made to a palette in code.

Edit Palettes in Code

Note

The application does not unload the loaded theme assemblies when you switch themes.

Refer to the following help topic to get the full list of available palette colors: Palette Color List.

To apply a custom palette to an application:

1. Reference the Mono.cecil NuGet package in your project.

2. Create a new ThemePalette instance:

   C#

   var custompalette = new ThemePalette("CustomPalette");
   

   VB.NET

   Dim custompalette = New ThemePalette("CustomPalette") 
   

   … or create a new ThemePalette instance based on a predefined palette. In this case, the new palette inherits a predefined palette’s colors:

   C#

   var custompalette = new ThemePalette("CustomPalette", PredefinedThemePalettes.RedWine);    
   

   VB.NET

   Dim custompalette = new ThemePalette("CustomPalette", PredefinedThemePalettes.RedWine)
   

3. Use the ThemePalette.SetColor method to specify new colors:

   C#

   custompalette.SetColor("Foreground", (Color)ColorConverter.ConvertFromString("#FFFF7200"));
   custompalette.SetColor("Backstage.Focused", Colors.White);    
   

   VB.NET

   custompalette.SetColor("Foreground", ColorConverter.ConvertFromString("#FF015C9F"))
   custompalette.SetColor("Foreground", Colors.White)
   

4. Pass the palette and a theme with palette support to the Theme.CreateTheme method to create a new theme:

   C#

   var customtheme = Theme.CreateTheme(custompalette, Theme.Office2016ColorfulSE);    
   

   VB.NET

   Dim customtheme = Theme.CreateTheme(custompalette, Theme.Office2016ColorfulSE)     
   

5. Pass the theme to the Theme.RegisterTheme method and set the ApplicationThemeHelper.ApplicationThemeName to the theme’s name to apply the theme to an application:

   C#

   Theme.RegisterTheme(customtheme);
   ApplicationThemeHelper.ApplicationThemeName = customtheme.Name;
   

   VB.NET

   Theme.RegisterTheme(customtheme)
   ApplicationThemeHelper.ApplicationThemeName = customtheme.Name  
   

The full code sample:

C#

var custompalette = new ThemePalette("CustomPalette");
custompalette.SetColor("Foreground", (Color)ColorConverter.ConvertFromString("#FFFF7200"));
custompalette.SetColor("Backstage.Focused", Colors.White);
var customtheme = Theme.CreateTheme(custompalette, Theme.Office2016ColorfulSE);
Theme.RegisterTheme(customtheme);
ApplicationThemeHelper.ApplicationThemeName = customtheme.Name;

VB.NET

Dim custompalette = New ThemePalette("CustomPalette")
custompalette.SetColor("Foreground", ColorConverter.ConvertFromString("#FF015C9F"))
custompalette.SetColor("Backstage.Focused", Colors.White)
Dim customtheme = Theme.CreateTheme(custompalette, Theme.Office2016ColorfulSE)
Theme.RegisterTheme(customtheme)
ApplicationThemeHelper.ApplicationThemeName = customtheme.Name

Limitation

Change a Theme at Runtime in a .NET 5 Application with Single File Deployment

DevExpress WPF theme assemblies must be extracted to a disk. When you publish a .NET 5 application (PublishSingleFile is true), set the IncludeAllContentForSelfExtract option to true in the project file. This will allow users to apply a palette at runtime.

XAML

<PropertyGroup>
  <OutputType>WinExe</OutputType>
  <TargetFramework>net5.0-windows</TargetFramework>
  <UseWPF>true</UseWPF>
  <Nullable>enable</Nullable>
  <PublishSingleFile>true</PublishSingleFile>
  <IncludeAllContentForSelfExtract>true</IncludeAllContentForSelfExtract>
</PropertyGroup>

Refer to the following MSDN article for more information on the issue: Single file deployment and executable.

Footnotes

1. You can also use the *System theme to change your application’s theme depending on the Windows OS app mode. Refer to the following topic for more information: Use Windows App Mode.