Accent Colors in Fluent Themes

• Jun 30, 2026
• 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 its associated color scale – lighter or darker shades. You can customize these 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.

Select the Accent Color 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:

Light Blue (Default)

@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.

Cool Blue

@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
    properties.Name = "Fluent Light CoolBlue";
    properties.AccentColor = ThemeFluentAccentColor.CoolBlue;
}))

Desert

@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
    properties.Name = "Fluent Light Desert";
    properties.AccentColor = ThemeFluentAccentColor.Desert;
}))

Mint

@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
    properties.Name = "Fluent Light Mint";
    properties.AccentColor = ThemeFluentAccentColor.Mint;
}))

Moss

@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
    properties.Name = "Fluent Light Moss";
    properties.AccentColor = ThemeFluentAccentColor.Moss;
}))

Orchid

@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
    properties.Name = "Fluent Light Orchid";
    properties.AccentColor = ThemeFluentAccentColor.Orchid;
}))

Purple

@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
    properties.Name = "Fluent Light Purple";
    properties.AccentColor = ThemeFluentAccentColor.Purple;
}))

Rose

@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
    properties.Name = "Fluent Light Rose";
    properties.AccentColor = ThemeFluentAccentColor.Rose;
}))

Rust

@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
    properties.Name = "Fluent Light Rust";
    properties.AccentColor = ThemeFluentAccentColor.Rust;
}))

Steel

@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
    properties.Name = "Fluent Light Steel";
    properties.AccentColor = ThemeFluentAccentColor.Steel;
}))

Storm

@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:

Blue

Cool Blue

Desert

Mint

Moss

Orchid

Purple

Rose

Rust

Steel

Storm

Specify a Custom Accent Color

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:

1. Call the RegisterTheme(ITheme) method in the Components/App.razor file and pass Themes.Fluent as a parameter.
2. Use the Clone(ThemeFluentProperties) method to access theme properties.
3. 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");
}))

---

Change Accent Color using CSS Variables

Primary color scale is a group of seventeen CSS variables (from --dxds-primary-10 to --dxds-primary-170). You can override values of individual variables or customize all of them for better consistency across different UI elements.

The following example overrides all --dxds-primary-* CSS variables in a separate stylesheet:

App.razor

@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
    properties.Name = "Custom Fluent";
    properties.AddFilePaths("css/FluentPrimary.css");
}))

FluentPrimary.css

:root {
    --dxds-primary-10: #F7F5F3;
    --dxds-primary-20: #F3EEE8;
    --dxds-primary-30: #EFE8DC;
    --dxds-primary-40: #EDE5D8;
    --dxds-primary-50: #E5D9C6;
    --dxds-primary-60: #D7BA9D;
    --dxds-primary-70: #C9AA86;
    --dxds-primary-80: #BA9A70;
    --dxds-primary-90: #A9885A;
    --dxds-primary-100: #977748;
    --dxds-primary-110: #86663C;
    --dxds-primary-120: #755531;
    --dxds-primary-130: #644428;
    --dxds-primary-140: #53351E;
    --dxds-primary-150: #422715;
    --dxds-primary-160: #311A0E;
    --dxds-primary-170: #220F07;
}

Refer to the following help topic for additional information: CSS Variables in Fluent Themes.