The requested page is not available for the requested platform. You are viewing the content for Default platform.

Edit Palette Colors

  • 3 min to read

Palette

The latest DevExpress Themes contain a palette. In the palette themes, you should edit less than 50 colors to change a theme appearance. In the non-palette themes, you should update hundreds of colors to achieve the same goal. Every palette color has a name and a color value.

When you create a new theme in the Theme Designer, you can choose the palette themes (Color Themes) in the Color Themes group:

Color Themes in Backstage View

Note

Themes you have imported from the Theme Editor do not contain a palette.

Palette Window

In the Palette window you can do the following operations:

  • Add new palette colors.
  • Edit any palette color's value.
  • Rename and delete palette theme specific colors.

When you add a color, this color appears in the Theme Specific group:

Theme Specific Palette Group

Edit Palettes

Use any of the following ways to open the list of available palette operations:

  • Right-click any palette color in the Palette window.
  • Focus the Palette window and select the ribbon context Palette tab.

palette-operations

Use any of the following approaches to edit a palette color value:

Search Palette Colors

The Palette window contains the search bar where you can search for a color name or color value.

palette-search-bar

Bind a Palette Color to an Element

The theme's XAML files contain palette bindings to elements. The Theme Designer uses the $ symbol to mark palette colors (for example, the $Backstage.Delimeter value represents the Backstage.Delimeter palette color).

Individual Colors Window

Follow the steps below to bind a palette color to an element in the Individual Colors window:

  1. Find the element in the Individual Colors Grid.
  2. Click the color's value in the Color field.
  3. Type a new color value or open the drop-down list and select a color from the list.

The following animation demonstrates how to bind a palette color to an element in the Individual Colors window:

binding palette color in the individual colors window

CodeView Window

Follow the steps below to bind a color to an element in the CodeView window:

  1. Find the element in the CodeView. You can use the View in XAML tool or right-click an item in the Individual Colors Window and select Navigate the Code.
  2. Type the $ symbol in the color value.
  3. Input the color name or use the Ctrl+Space key combination and choose a color from the palette colors list.
  4. Save the file to apply new colors to a theme and see changes in the Preview window.
Tip

The text editor underlines the palette color name with this color's value.

Palette Color Underlining Codeview

You can group items by colors in the Individual Colors window. To change the color of all items in a group, right-click the group and enter a color name/value.