Fluent Theme Customization (Accent Colors)
- 4 minutes to read
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.
Primary Accent Color: Select from the Predefined Palette
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;
}))
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:
Primary Accent Color: Specify a Custom Value
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:
- Call the RegisterTheme(ITheme) method in the Components/App.razor file and pass Themes.Fluent as a parameter.
- Use the Clone(ThemeFluentProperties) method to access theme properties.
- Call the ThemeFluentProperties.SetCustomAccentColor(color) method and pass the selected color as a parameter.
Tip
The SetCustomAccentColor method’s parameter accepts the following formats:
- Longhand and shorthand hexadecimal color values:
#ffff00,#ff0. - RGB and RGBA color codes:
rgb(255, 0, 0),rgba(0, 230, 0, 0.3). - HTML color name (case-insensitive):
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");
}))
Secondary Accent Colors: Customize CSS Variables
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>
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 more information: Add Stylesheets to a Theme.
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "My Fluent";
properties.AddFilePaths("css/fluent/accent-colors.css");
}))
The image below shows applied accent colors in a color palette format:
