Skip to main content

Get Started

  • 4 minutes to read

This topic describes how to change the Microsoft Excel-inspired Office 2019 Colorful theme from blue colors to green.


Create a New Theme

  1. Run the Theme Designer. Open the Get Started Tab and select Create a New Theme.


  2. Select a base theme and version for your new theme. In this example, we selected the Office 2019 Colorful theme v20.1.3.


  3. Specify a theme name (Colorful_Excel) and path. Your new theme name should be different from the base theme name.


  4. Click Create.

The Theme Designer copies the Office 2019 Colorful base theme and adds it to the specified directory.

Edit a Theme

  1. Set up preview

    The Theme Designer allows you to preview DevExpress and standard controls with your theme applied.

    Click Build or use F6 to build the theme.


    Select the Spreadsheet with Ribbon in the Navigation window to preview the theme.


  2. Select the element

    Enable the Inspect Element tool in the ribbon or use Ctrl+D, hold down Ctrl+Shift, and click the Ribbon header to select the element.

    Inspect Element Tool

  3. Filter colors

    Use the ribbon icon or Ctrl+E to enable the Filter Colors tool and display only the selected element’s colors.

    Filter Colors Tool

  4. Find similar colors

    Copy the Backstage.Window.Background color value, disable the Filter Colors tool, and paste the copied color value into the Palette Window search box. When you paste the color into the search box, the palette window will only display palette colors with the same value.

    Find Similar Colors

  5. Change the colors

    To the right of the palette color value, click the color value and select the Color Picker tool. Pick the accent color associated with Excel. The Color Picker tool copies the color to the clipboard. Use the value copied to the clipboard for all palette colors in the search results.

    Color Picker Tool

  6. Find and change other colors

    Disable the search in the Palette window. Repeat steps 4 and 5 for the Backstage.Delimeter, Backstage.HoverBackground, and Backstage.SelectionBackground palette colors. Pick the Excel colors from the following elements:

    Other Elements

  7. Save all files

    Use Ctrl+Shift+S or the Save All icon to save all changes.

    Save All Icon

Edit XAML Files

This section describes how to find and edit the XAML code for an element.

  1. Open the SplashScreen preview in the Navigation window.

  2. Enable the Inspect Element tool, hold down Ctrl+Shift, and click the SplashScreen‘s progress bar. The Theme Designer opens the XAML code for this element in the CodeView Window.

    Inspect Element Tool

  3. Open the Properties Window to see the selected element’s properties. To the right of the TextElement.Foreground property, click the Inherited link to navigate to the template where the property is specified.

    Properties Window

  4. To the right of the Background property, click the Style link to open the XAML file where the property is defined.

    XAML File

  5. In the CodeView Window, Click the ProgressBarBackgroundBrush static resource and use F12 to navigate to the XAML code where the SolidColorBrush key is specified. Change the Color value to $HoverBackground and the ProgressBarBorderBrush‘s Color to $Focused.

    CodeView Window

  6. Click the the SplashScreen.xaml tab to return to the SplashScreen.xaml file. Click the Template property’s ProgressBarTemplate static resource, use F12, and change the BorderThickness value to 1 to display the progress bar’s border. Use Ctrl+S to save the XAML file.

    Border Thickness

  7. Use F6 to build the theme. Now, your changes are applied to the theme.

    Result View


Refer to the Edit Theme in XAML topic for more information on how to edit themes in XAML files.

Save and Publish

Click Publish to create a theme assembly file.


The Theme Designer publishes your theme and prompts you to open the output directory with .DLL and .PDB files.


Apply the Theme to an Application

  1. Run Visual Studio and open a WPF application.
  2. Add a reference to the theme’s .DLL assembly.




    You can use this method to apply a custom theme to a .NET Core 3.0 application.

  3. Add the following code to the App.xaml.cs file:

    static App() {
        var theme = new Theme("Colorful_Excel");
        theme.AssemblyName = "DevExpress.Xpf.Themes.Colorful_Excel.v20.1";
        ApplicationThemeHelper.ApplicationThemeName = "Colorful_Excel";
  4. Run the application.