BuyLog In
KB Article T578454
Visible to All Users

SVG Skins and Palettes – FAQ

Starting with version 17.2, we ship new SVG skins, which look perfect on any screen and provides dozens of color schemes:
The Bezier Skin: Re-imagining WinForms Themes with Vector Graphics (Available in v17.2)

We recommend that you review the following KB article to find information about Appearance and Skin customization in DevExpress controls:
DevExpress WinForms Cheat Sheet - Appearances and Skins

How to apply an SVG skin

Select The Bezier skin at design time using our DefaultLookAndFeel component or use the following code:

C#
UserLookAndFeel.Default.SetSkinStyle(SkinStyle.Bezier);  
Visual Basic
UserLookAndFeel.Default.SetSkinStyle(SkinStyle.Bezier)

How to select a specific palette in code

Starting with version 19.1, you can modify the palette using the Project Settings Page without any code.

Starting with version 17.2.4:

C#
UserLookAndFeel.Default.SetSkinStyle(SkinSvgPalette.Bezier.Fireball);  
Visual Basic
UserLookAndFeel.Default.SetSkinStyle(SkinSvgPalette.Bezier.Fireball)

In version 17.2.3:

C#
var skin = CommonSkins.GetSkin(UserLookAndFeel.Default);  
DevExpress.Utils.Svg.SvgPalette fireBall = skin.CustomSvgPalettes["Fireball"];  
skin.SvgPalettes[Skin.DefaultSkinPaletteName].SetCustomPalette(fireBall);  
LookAndFeelHelper.ForceDefaultLookAndFeelChanged();  
Visual Basic
Dim skin = CommonSkins.GetSkin(UserLookAndFeel.Default)  
Dim fireBall As DevExpress.Utils.Svg.SvgPalette = skin.CustomSvgPalettes("Fireball")  
skin.SvgPalettes(Skin.DefaultSkinPaletteName).SetCustomPalette(fireBall)  
LookAndFeelHelper.ForceDefaultLookAndFeelChanged()

How to get an active palette name

Starting with version 17.2.4:

C#
var name = UserLookAndFeel.Default.ActiveSvgPaletteName;  
Visual Basic
Dim name = UserLookAndFeel.Default.ActiveSvgPaletteName

In version 17.2.3:

C#
var commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default);  
DevExpress.Utils.Svg.SvgPalette customPallete = commonSkin.SvgPalettes[Skin.DefaultSkinPaletteName].CustomPalette;  
var name = commonSkin.CustomSvgPalettes.FirstOrDefault(x => x.Value == customPallete).Key?.Name;  
Visual Basic
Dim commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default)  
Dim customPallete As DevExpress.Utils.Svg.SvgPalette = commonSkin.SvgPalettes(Skin.DefaultSkinPaletteName).CustomPalette  
Dim name = commonSkin.CustomSvgPalettes.FirstOrDefault(Function(x) x.Value = customPallete).Key?.Name

How to get a color in a skin palette

C#
var commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default);
SvgPalette svgPalette = commonSkin.SvgPalettes[Skin.DefaultSkinPaletteName] as SvgPalette;
Color keyPaintColor = svgPalette["Key Paint"].Value;
Visual Basic
Dim commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default)
Dim svgPalette As SvgPalette = TryCast(commonSkin.SvgPalettes(Skin.DefaultSkinPaletteName), SvgPalette)
Dim keyPaintColor As Color = svgPalette("Key Paint").Value

How to catch a moment when a skin or palette is changed

You can handle the UserLookAndFeel.Default.StyleChangedstyleChanged static (shared in VB) event.

How to modify a color in a palette

C#
var commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default);
SvgPalette svgPalette = commonSkin.SvgPalettes[Skin.DefaultSkinPaletteName] as SvgPalette;
svgPalette.Colors.FirstOrDefault(x=>x.Name =="Paint").Value = Color.Red;
LookAndFeelHelper.ForceDefaultLookAndFeelChanged();  
Visual Basic
Dim commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default)
Dim svgPalette As SvgPalette = TryCast(commonSkin.SvgPalettes(Skin.DefaultSkinPaletteName), SvgPalette)
svgPalette.Colors.FirstOrDefault(Function(x) x.Name ="Paint").Value = Color.Red
LookAndFeelHelper.ForceDefaultLookAndFeelChanged()

How to create and set my own SvgSkinColorPalette for Vector Themes

Use our SkinEditor tool as described in the Working with Vector Skins article. If you wish to manually create a new palette, use the following code:
Starting with version 19.1.3:

C#
svgPalette.Colors.Add(new SvgColor("Paint Deep Shadow", Color.FromArgb(212, 212, 212)));  
Visual Basic
svgPalette.Colors.Add(New SvgColor("Paint Deep Shadow", Color.FromArgb(212, 212, 212)))

Starting with version 17.2.4:

C#
SvgPalette svgPalette = new SvgPalette();  
svgPalette.Colors.Add(new SvgColor("Paint", Color.FromArgb(242, 242, 242)));  
svgPalette.Colors.Add(new SvgColor("Paint High", Color.FromArgb(255, 255, 255)));  
svgPalette.Colors.Add(new SvgColor("Paint Shadow", Color.FromArgb(222, 222, 222)));  
svgPalette.Colors.Add(new SvgColor("Brush", Color.FromArgb(80, 80, 80)));  
svgPalette.Colors.Add(new SvgColor("Brush Light", Color.FromArgb(150, 150, 150)));  
svgPalette.Colors.Add(new SvgColor("Brush High", Color.FromArgb(80, 80, 80)));  
svgPalette.Colors.Add(new SvgColor("Brush Major", Color.FromArgb(180, 180, 180)));  
svgPalette.Colors.Add(new SvgColor("Brush Minor", Color.FromArgb(210, 210, 210)));  
svgPalette.Colors.Add(new SvgColor("Accent Paint", Color.FromArgb(23, 107, 209)));  
svgPalette.Colors.Add(new SvgColor("Accent Paint Light", Color.FromArgb(191, 224, 255)));  
svgPalette.Colors.Add(new SvgColor("Accent Brush", Color.FromArgb(255, 255, 255)));  
svgPalette.Colors.Add(new SvgColor("Accent Brush Light", Color.FromArgb(81, 148, 224)));  
svgPalette.Colors.Add(new SvgColor("Key Paint", Color.FromArgb(71, 71, 71)));  
svgPalette.Colors.Add(new SvgColor("Key Brush", Color.FromArgb(255, 255, 255)));  
svgPalette.Colors.Add(new SvgColor("Key Brush Light", Color.FromArgb(150, 150, 150)));  
svgPalette.Colors.Add(new SvgColor("Red", Color.FromArgb(226, 54, 66)));  
svgPalette.Colors.Add(new SvgColor("Green", Color.FromArgb(60, 146, 92)));  
svgPalette.Colors.Add(new SvgColor("Blue", Color.FromArgb(58, 116, 194)));  
svgPalette.Colors.Add(new SvgColor("Yellow", Color.FromArgb(252, 169, 10)));  
svgPalette.Colors.Add(new SvgColor("Black", Color.FromArgb(122, 122, 122)));  
svgPalette.Colors.Add(new SvgColor("Gray", Color.FromArgb(190, 190, 190)));  
svgPalette.Colors.Add(new SvgColor("White", Color.FromArgb(255, 255, 255)));  

var commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default);  
commonSkin.CustomSvgPalettes.Add(new SvgPaletteKey(commonSkin.CustomSvgPalettes.Count, "Custom Palette"), svgPalette);  
UserLookAndFeel.Default.SetSkinStyle(commonSkin.Name, "Custom Palette");  
Visual Basic
Dim svgPalette As New SvgPalette()  
svgPalette.Colors.Add(New SvgColor("Paint", Color.FromArgb(242, 242, 242)))  
svgPalette.Colors.Add(New SvgColor("Paint High", Color.FromArgb(255, 255, 255)))  
svgPalette.Colors.Add(New SvgColor("Paint Shadow", Color.FromArgb(222, 222, 222)))  
svgPalette.Colors.Add(New SvgColor("Brush", Color.FromArgb(80, 80, 80)))  
svgPalette.Colors.Add(New SvgColor("Brush Light", Color.FromArgb(150, 150, 150)))  
svgPalette.Colors.Add(New SvgColor("Brush High", Color.FromArgb(80, 80, 80)))  
svgPalette.Colors.Add(New SvgColor("Brush Major", Color.FromArgb(180, 180, 180)))  
svgPalette.Colors.Add(New SvgColor("Brush Minor", Color.FromArgb(210, 210, 210)))  
svgPalette.Colors.Add(New SvgColor("Accent Paint", Color.FromArgb(23, 107, 209)))  
svgPalette.Colors.Add(New SvgColor("Accent Paint Light", Color.FromArgb(191, 224, 255)))  
svgPalette.Colors.Add(New SvgColor("Accent Brush", Color.FromArgb(255, 255, 255)))  
svgPalette.Colors.Add(New SvgColor("Accent Brush Light", Color.FromArgb(81, 148, 224)))  
svgPalette.Colors.Add(New SvgColor("Key Paint", Color.FromArgb(71, 71, 71)))  
svgPalette.Colors.Add(New SvgColor("Key Brush", Color.FromArgb(255, 255, 255)))  
svgPalette.Colors.Add(New SvgColor("Key Brush Light", Color.FromArgb(150, 150, 150)))  
svgPalette.Colors.Add(New SvgColor("Red", Color.FromArgb(226, 54, 66)))  
svgPalette.Colors.Add(New SvgColor("Green", Color.FromArgb(60, 146, 92)))  
svgPalette.Colors.Add(New SvgColor("Blue", Color.FromArgb(58, 116, 194)))  
svgPalette.Colors.Add(New SvgColor("Yellow", Color.FromArgb(252, 169, 10)))  
svgPalette.Colors.Add(New SvgColor("Black", Color.FromArgb(122, 122, 122)))  
svgPalette.Colors.Add(New SvgColor("Gray", Color.FromArgb(190, 190, 190)))  
svgPalette.Colors.Add(New SvgColor("White", Color.FromArgb(255, 255, 255)))  

Dim commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default)  
commonSkin.CustomSvgPalettes.Add(New SvgPaletteKey(commonSkin.CustomSvgPalettes.Count, "Custom Palette"), svgPalette)  
UserLookAndFeel.Default.SetSkinStyle(commonSkin.Name, "Custom Palette")

In version 17.2.3:

C#
SvgPalette svgPalette = new SvgPalette();  
svgPalette.Colors.Add(new SvgColor("Paint", Color.FromArgb(242, 242, 242)));  
svgPalette.Colors.Add(new SvgColor("Paint High", Color.FromArgb(255, 255, 255)));  
svgPalette.Colors.Add(new SvgColor("Paint Shadow", Color.FromArgb(222, 222, 222)));  
svgPalette.Colors.Add(new SvgColor("Brush", Color.FromArgb(80, 80, 80)));  
svgPalette.Colors.Add(new SvgColor("Brush Light", Color.FromArgb(150, 150, 150)));  
svgPalette.Colors.Add(new SvgColor("Brush High", Color.FromArgb(80, 80, 80)));  
svgPalette.Colors.Add(new SvgColor("Brush Major", Color.FromArgb(180, 180, 180)));  
svgPalette.Colors.Add(new SvgColor("Brush Minor", Color.FromArgb(210, 210, 210)));  
svgPalette.Colors.Add(new SvgColor("Accent Paint", Color.FromArgb(23, 107, 209)));  
svgPalette.Colors.Add(new SvgColor("Accent Paint Light", Color.FromArgb(191, 224, 255)));  
svgPalette.Colors.Add(new SvgColor("Accent Brush", Color.FromArgb(255, 255, 255)));  
svgPalette.Colors.Add(new SvgColor("Accent Brush Light", Color.FromArgb(81, 148, 224)));  
svgPalette.Colors.Add(new SvgColor("Key Paint", Color.FromArgb(71, 71, 71)));  
svgPalette.Colors.Add(new SvgColor("Key Brush", Color.FromArgb(255, 255, 255)));  
svgPalette.Colors.Add(new SvgColor("Key Brush Light", Color.FromArgb(150, 150, 150)));  
svgPalette.Colors.Add(new SvgColor("Red", Color.FromArgb(226, 54, 66)));  
svgPalette.Colors.Add(new SvgColor("Green", Color.FromArgb(60, 146, 92)));  
svgPalette.Colors.Add(new SvgColor("Blue", Color.FromArgb(58, 116, 194)));  
svgPalette.Colors.Add(new SvgColor("Yellow", Color.FromArgb(252, 169, 10)));  
svgPalette.Colors.Add(new SvgColor("Black", Color.FromArgb(122, 122, 122)));  
svgPalette.Colors.Add(new SvgColor("Gray", Color.FromArgb(190, 190, 190)));  
svgPalette.Colors.Add(new SvgColor("White", Color.FromArgb(255, 255, 255)));  
var commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default);  
commonSkin.SvgPalettes[Skin.DefaultSkinPaletteName].CustomPalette = svgPalette;  
commonSkin.CustomSvgPalettes.Add(new SvgPaletteKey(commonSkin.CustomSvgPalettes.Count, "Custom Palette"), svgPalette);  
LookAndFeelHelper.ForceDefaultLookAndFeelChanged();  
Visual Basic
Dim svgPalette As New SvgPalette()  
svgPalette.Colors.Add(New SvgColor("Paint", Color.FromArgb(242, 242, 242)))  
svgPalette.Colors.Add(New SvgColor("Paint High", Color.FromArgb(255, 255, 255)))  
svgPalette.Colors.Add(New SvgColor("Paint Shadow", Color.FromArgb(222, 222, 222)))  
svgPalette.Colors.Add(New SvgColor("Brush", Color.FromArgb(80, 80, 80)))  
svgPalette.Colors.Add(New SvgColor("Brush Light", Color.FromArgb(150, 150, 150)))  
svgPalette.Colors.Add(New SvgColor("Brush High", Color.FromArgb(80, 80, 80)))  
svgPalette.Colors.Add(New SvgColor("Brush Major", Color.FromArgb(180, 180, 180)))  
svgPalette.Colors.Add(New SvgColor("Brush Minor", Color.FromArgb(210, 210, 210)))  
svgPalette.Colors.Add(New SvgColor("Accent Paint", Color.FromArgb(23, 107, 209)))  
svgPalette.Colors.Add(New SvgColor("Accent Paint Light", Color.FromArgb(191, 224, 255)))  
svgPalette.Colors.Add(New SvgColor("Accent Brush", Color.FromArgb(255, 255, 255)))  
svgPalette.Colors.Add(New SvgColor("Accent Brush Light", Color.FromArgb(81, 148, 224)))  
svgPalette.Colors.Add(New SvgColor("Key Paint", Color.FromArgb(71, 71, 71)))  
svgPalette.Colors.Add(New SvgColor("Key Brush", Color.FromArgb(255, 255, 255)))  
svgPalette.Colors.Add(New SvgColor("Key Brush Light", Color.FromArgb(150, 150, 150)))  
svgPalette.Colors.Add(New SvgColor("Red", Color.FromArgb(226, 54, 66)))  
svgPalette.Colors.Add(New SvgColor("Green", Color.FromArgb(60, 146, 92)))  
svgPalette.Colors.Add(New SvgColor("Blue", Color.FromArgb(58, 116, 194)))  
svgPalette.Colors.Add(New SvgColor("Yellow", Color.FromArgb(252, 169, 10)))  
svgPalette.Colors.Add(New SvgColor("Black", Color.FromArgb(122, 122, 122)))  
svgPalette.Colors.Add(New SvgColor("Gray", Color.FromArgb(190, 190, 190)))  
svgPalette.Colors.Add(New SvgColor("White", Color.FromArgb(255, 255, 255)))  
Dim commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default)  
commonSkin.SvgPalettes(Skin.DefaultSkinPaletteName).CustomPalette = svgPalette  
commonSkin.CustomSvgPalettes.Add(New SvgPaletteKey(commonSkin.CustomSvgPalettes.Count, "Custom Palette"), svgPalette)  
LookAndFeelHelper.ForceDefaultLookAndFeelChanged()

How to persist the applied skin and palette between application sessions

You can use the approach from the How to save/restore the applied skin and palette between application sessions example.

How to modify the color of a specific skin element when a palette is used

The solution that is described below uses inner APIs that might be changed in the future. That is why the correct solution here is to create a new skin by using our Skin Editor. Starting with version 18.2, we improved the mechanism of working with custom skins. Currently, a custom skin stores only differences from its template skins. It decreases the skin size and allows us to not store the parent skin version. So, you do not need to upgrade your custom skins with the Skin Editor. Now, you can only create a custom skin once and it will automatically obtain all updates from its parent skin whenever you upgrade your application to a newer version.

For this, you need to get a required skin element as shown in the How to change a skin element programmatically example. After that, modify the SkinColorId property. Please review the following code:

C#
SkinElement element = <a required skin element>  
element.Image.SvgPalettes[<a required index palette>].Colors[<a required index color>].SkinColorId = "Green";  
LookAndFeelHelper.ForceDefaultLookAndFeelChanged();  
Visual Basic
Dim element As SkinElement = <a required skin element>  
element.Image.SvgPalettes(<a required index palette>).Colors(<a required index color>).SkinColorId ="Green"  
LookAndFeelHelper.ForceDefaultLookAndFeelChanged()

Instead of the "Green" value, you can assign any the SvgColor name which are listed in the "How to create and set my own SvgSkinColorPalette for Vector Themes" paragraph of this topic.

How to use palettes in an XAF application

Review the How to show Color Swatches for the Bezier skin in XAF and persist the user choice KB article.

How to show Swatch Picker UI

C#
var owner = this;  

using (var dialog = new DevExpress.Customization.SvgSkinPaletteSelector(owner)) {  
    dialog.ShowDialog();  
}  
Visual Basic
Dim owner = Me  

Using dialog = New DevExpress.Customization.SvgSkinPaletteSelector(owner)  
    dialog.ShowDialog()  
End Using
Show previous comments (15)
DevExpress Support Team 4 years ago

    Hello Christopher,

    I've created a separate ticket on your behalf (T936276: How to determine if a theme is a dark theme or not). It has been placed in our processing queue and will be answered shortly.

    DD DD
    DevExpress Developer 2022 3 years ago

      I think the C# example above is incorrect:

      var commonSkin = CommonSkins.GetSkin(UserLookAndFeel.Default);
      SvgPalette svgPalette = commonSkin.SvgPalettes[Skin.DefaultSkinPaletteName] as SvgPalette;
      Color keyPaintColor = svgPalette.Item("Key Paint").Value;

      I think it should be:

      Color keyPaintColor = svgPalette["Key Paint"].Value;

      DevExpress Support Team 3 years ago

        Hello,

        Thank you for bringing this to our attention. Indeed, your code is correct in current versions. I corrected the corresponding code snippet.
        Thank you again for your cooperation. We appreciate it.

        Sign in to comment on this post

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.