Edit Palette Colors

  • 3 min to read

The following WPF Themes are available with palettes:

Theme Family Themes
Office 2019 Black, Colorful, Dark Gray, White, High Contrast
Office 2016 SE Black, Colorful, Dark Gray, White
Visual Studio 2017 Blue, Dark, Light
Tip

Refer to the Palettes topic for more information.

Create a Custom Theme With a Palette

  1. In the New tab, choose the Color Themes group and select a base theme.
  2. Specify a theme name and a theme location.
  3. Click Create.

Color Themes in Backstage View

Note

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

Topic: Import Themes

After you create a new custom theme, you can import a predefined palette and create a theme based on this palette or modify a default theme palette.

Import a Predefined Palette

You can import one of the theme's predefined palettes and use it as a base for a custom palette.

  1. Click Import on the Palette ribbon tab.
  2. Select a palette from the drop-down list.

Import a Predefined Palette

Edit Palettes

Use one of the following approaches to open the list of available palette operations:

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

palette-operations

You can paste or type a color value in the Palette window or use the Color Picker Tool to edit a color value.

Tip

Use the search bar in the Palette window to search for a color by its name or value.

palette-search-bar

Find an Element's Palette Color

Filter Colors Tool

You can use the Filter Colors tool to find palette colors which are bound to the selected element.

Filter-Colors-video

Inspect Element Tool

To display an element's XAML code and its position in the Visual Tree, use the Inspect Element tool:

Inspect Element Tool

Bind a Palette Color to an Element

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

Individual Colors Window

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

  1. Click the color's value in the Color field.
  2. 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

Tip

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.

CodeView Window

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

  1. Use the Inspect Element tool to open the element's XAML or right-click an item in the Individual Colors Window and select Navigate to XAML.
  2. Type the $ symbol in the color value.
  3. Input the color name or use Ctrl+Space and choose a color from the list of palette colors.
  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

Export a Palette

You can export a modified a theme palette in one of the following ways:

See Also