Color Scheme Customization

• Sep 03, 2018
• 3 minutes to read

This document describes how to customize the color scheme of your application.

• Overriding Colors
• Creating Custom Themes
• Using DevExpress Brushes in Resources
• Using the AccentColorizer Class

Overriding Colors

The DevExpress.Core.ThemeManager.GenericColorScheme.AllScopes property provides access to color settings for individual elements of all DevExpress Universal controls. A color setting is represented by the DevExpress.Themes.ColorSet object that specifies two colors corresponding to the Default and Light UI themes (to learn more, see the ElementTheme topic on MSDN). To override a default color setting, assign the desired value in the App constructor before the InitializeComponent method. A color can be represented by the Windows.UI.Color object or its hexadecimal value. If you set a color setting to a color value, the value is assigned both to the Default and Light colors. The code snippet below illustrates how to override default colors.

C#

using DevExpress.Core;
using DevExpress.Themes.ColorKeys;
//...

sealed partial class App : Application {

    public App() {
        //both Default and Light colors are set to Black
        ThemeManager.GenericColorScheme.AllScopes.WindowTitleColors
            [WindowTitleColorKeys.Background] = Windows.UI.Colors.Black;
        //the Light color is set to the first parameter of the ColorSet constructor, the Default color is set to the second parameter
        ThemeManager.GenericColorScheme.AllScopes.WindowTitleColors
            [WindowTitleColorKeys.Foreground] = new DevExpress.Themes.ColorSet(0xFFFF8080, 0xFFFF1010);
        //the Light and Default colors are set explicitly
        ThemeManager.GenericColorScheme.AllScopes.RibbonControlColors
            [RibbonControlColorKeys.Background].Default = 0xFF008000;
        ThemeManager.GenericColorScheme.AllScopes.RibbonControlColors
            [RibbonControlColorKeys.Background].Light = Windows.UI.Colors.Green;

        this.InitializeComponent();
        this.Suspending += OnSuspending;
    }
    //...
}

Creating Custom Themes

To create a custom theme, follow these steps.

• Create a DevExpress.Themes.Generic.GenericColorScheme descendant and override its Initialize method. In the method’s implementation, call the base.Initialize method to initialize base color scopes and then override default colors.

  C#

  class GreenTitleColorScheme : GenericColorScheme {
      public GreenTitleColorScheme (string name) : base(name) { }
  
      protected override void Initialize() {
          base.Initialize();
          AllScopes.WindowTitleColors[WindowTitleColorKeys.Background] = Colors.Green;
      }
  }
  

• Use the DevExpress.Core.ThemeManager.RegisterColorScheme method to register the new theme. To apply the new theme, set the ThemeManager.CurrentColorSchemeName property to the name of the custom theme.

  C#

  ThemeManager.RegisterColorScheme(new GreenTitleColorScheme("GreenTitleColorScheme"));
  ThemeManager.CurrentColorSchemeName = "GreenTitleColorScheme";
  

Using DevExpress Brushes in Resources

The DevExpress.Core.ColorKey.Link attached property allows you to set a Brush value in the Resources to a color used by the DevExpress Universal control.

The example below illustrates how to set the ContentControl’s Foreground to different colors used by DevExpress controls depending on the current theme.

XAML

<ResourceDictionary>
    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Light">
            <SolidColorBrush x:Key="ForegroundBrush" Core:ColorKey.Link="DateNavigatorColors.DecorationTodayBackground.Light" />
        </ResourceDictionary>
        <ResourceDictionary x:Key="Default">
            <SolidColorBrush x:Key="ForegroundBrush" Core:ColorKey.Link="RatingEditColors.ItemHovered.Default" />
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
<!---->
<ContentControl Foreground="{ThemeResource ForegroundBrush}" >
    <!---->
</ContentControl>

Using the AccentColorizer Class

The DevExpress.Core.AccentColorizer class allows you to customize the color scheme of all DevExpress controls in your application based on a specified accent color.

To change the current accent color, use the Apply method.

C#

DevExpress.Core.AccentColorizer.Apply(Windows.UI.Colors.BurlyWood);