ThemeFluentProperties Class

Contains Fluent theme properties.

Assembly : DevExpress.Blazor.Resources.v25.2.dll

NuGet Package : DevExpress.Blazor.Resources

Declaration

csharp

public class ThemeFluentProperties :
    ThemeProperties

Remarks

Call the RegisterTheme(ITheme) method in the App.razor file to register a theme in your Blazor application.

Pass a ThemeFluentProperties object to the DxThemeFluent.Clone() method as a parameter to clone the built-in Fluent Light Blue theme and modify it as needs dictate. Available options include:

NameSpecifies the theme name. Serves as a unique theme identifier.ModeSpecifies the theme mode (light or dark).AccentColorApplies a predefined accent color to a Fluent theme.ApplyToPageElementsSpecifies whether a theme includes specific styles for non-DevExpress elements (hyperlinks, input/text elements, headings, browser scroll bars, etc.). Set this property to false to apply theme-specific styles to DevExpress components only.

The following code snippet creates a Fluent Dark Purple theme using predefined theme mode and accent color. The theme does not include styles for non-DevExpress (page) elements:

App.razor

razor

<head>
    @*...*@
    @DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
        properties.Name = "Fluent Dark Purple";
        properties.Mode = ThemeMode.Dark;
        properties.AccentColor = ThemeFluentAccentColor.Purple;
        properties.ApplyToPageElements = false;
    }))
</head>

You can also call the following methods:

SetCustomAccentColor(String)Applies a custom accent color to a Fluent theme.AddFilePaths(String[])Adds stylesheets to a theme and loads them when applying the theme.

The following code snippet creates a Fluent theme with a custom accent color:

App.razor

razor

<head>
    @*...*@
    @DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
        properties.Name = "Fluent Light Custom";
        properties.SetCustomAccentColor("#107c41");
        properties.AddFilePaths("css/fluent/FluentCustomStyles.css");
    }))
</head>

Use Bootstrap Styles

In default configuration, DevExpress Fluent themes do not include Bootstrap stylesheets. To apply Bootstrap styles, enable the UseBootstrapStyles property in a Clone() method call:

App.razor

razor

<head>
    @*...*@
    @DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
        properties.Name = "Fluent Blue Bootstrap";
        properties.UseBootstrapStyles = true;
    }))
</head>

The UseBootstrapStyles property adds the Bootstrap theme stylesheet configured for the Blue accent color. We recommend that you use this capability for Fluent Blue themes only (in both Light and Dark modes).

Inheritance

Object ThemeProperties ThemeFluentProperties