blazor-405530-styling-and-themes-fluent-theme-customization-fluent-accent-colors.md
When you apply a Fluent theme to DevExpress Blazor UI Controls, you specify an accent color. You can select a predefined color or pick a custom color based on user preferences or brand colors. The DevExpress theming algorithm uses the specified primary color to generate a few secondary colors - darker or lighter shades. You can customize these secondary colors too - review instructions later in this help topic. Once colors are set, controls use them to highlight their interactive elements in different states.
This topic describes how to manage accent colors in Fluent themes. For general information about DevExpress themes, refer to the following help topic: Themes.
Fluent themes include eleven predefined accent colors stored in the ThemeFluentAccentColor enumeration:
The default theme is Fluent Light Blue. To apply this theme, call the RegisterTheme(ITheme) method in the Components/App.razor file and pass Themes.Fluent as a parameter:
@DxResourceManager.RegisterTheme(Themes.Fluent)
To apply another predefined accent color, clone the default theme using the Clone(ThemeFluentProperties) method and specify the AccentColor property:
Note
We recommend that you specify the Name property for each theme you clone. The Name property value serves as a unique theme identifier.
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Light CoolBlue";
properties.AccentColor = ThemeFluentAccentColor.CoolBlue;
}))
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Light Desert";
properties.AccentColor = ThemeFluentAccentColor.Desert;
}))
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Light Mint";
properties.AccentColor = ThemeFluentAccentColor.Mint;
}))
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Light Moss";
properties.AccentColor = ThemeFluentAccentColor.Moss;
}))
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Light Orchid";
properties.AccentColor = ThemeFluentAccentColor.Orchid;
}))
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Light Purple";
properties.AccentColor = ThemeFluentAccentColor.Purple;
}))
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Light Rose";
properties.AccentColor = ThemeFluentAccentColor.Rose;
}))
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Light Rust";
properties.AccentColor = ThemeFluentAccentColor.Rust;
}))
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Light Steel";
properties.AccentColor = ThemeFluentAccentColor.Steel;
}))
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Light Storm";
properties.AccentColor = ThemeFluentAccentColor.Storm;
}))
All code snippets above apply themes in default Light mode. To change the theme mode to Dark, use the ThemeFluentProperties.Mode option:
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Dark";
properties.Mode = ThemeMode.Dark;
@* ... *@
}))
The images below demonstrate how accent colors affect the appearance of our Blazor Grid component:
Fluent theme APIs also allow you to apply a custom accent color to your Fluent theme to align with your brand or design requirements. Key steps include:
Tip
The SetCustomAccentColor method’s parameter accepts the following formats:
#ffff00, #ff0.rgb(255, 0, 0), rgba(0, 230, 0, 0.3).red, DarkGreen.@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Custom";
@* Hex *@
properties.SetCustomAccentColor("#3cb371");
@* RGB *@
properties.SetCustomAccentColor("RGB(60, 179, 113)");
@* HTML *@
properties.SetCustomAccentColor("MediumSeaGreen");
}))
Once you apply an accent color using APIs, the theme generates the --dxbl-accent-color CSS variable and adds the following style to page markup:
<style data-theme-id="Fluent Accent">
:root { --dxbl-accent-color: MediumSeaGreen; }
</style>
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Accent";
properties.SetCustomAccentColor("MediumSeaGreen");
}))
After an accent color is applied, the following CSS variables define application appearance:
--dxbl-accent-color-10
--dxbl-accent-color-20
--dxbl-accent-color-30
--dxbl-accent-color-40
--dxbl-accent-color-50
--dxbl-accent-color-60
--dxbl-accent-color-70
--dxbl-accent-color-80
--dxbl-accent-color-90
--dxbl-accent-color-100
--dxbl-accent-color-110
--dxbl-accent-color-120
--dxbl-accent-color-130
--dxbl-accent-color-140
--dxbl-accent-color-150
--dxbl-accent-color-160
--dxbl-accent-color-170
Each variable defines the color of a specific UI element or state. You can override values of individual variables or customize all of them for better consistency across different UI elements.
The following code snippet partially overrides accent color CSS variables in a separate stylesheet. The stylesheet is added to the theme with a AddFilePaths() method call. Refer to the following help topic for additional information: Add Stylesheets to a Theme.
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "My Fluent";
properties.AddFilePaths("css/fluent/accent-colors.css");
}))
:root {
--dxbl-accent-color-170: #001b03;
--dxbl-accent-color-150: #063f0b;
--dxbl-accent-color-140: #0a5210;
--dxbl-accent-color-120: #12791b;
--dxbl-accent-color-110: #178e21;
--dxbl-accent-color-100: #1da326;
--dxbl-accent-color-80: #3dc247;
--dxbl-accent-color-70: #53cc5d;
--dxbl-accent-color-60: #6fd674;
--dxbl-accent-color-40: #a7ecaa;
--dxbl-accent-color-30: #c3f6c6;
--dxbl-accent-color-20: #dcfadc;
--dxbl-accent-color-10: #f1fdf1;
}
The image below shows applied accent colors in a color palette format: