ThemeFluentProperties Class
Contains Fluent theme properties.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v25.1.dll
NuGet Package: DevExpress.Blazor
Declaration
public class ThemeFluentProperties :
ThemePropertiesRemarks
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:
- Name
- Specifies the theme name. Serves as a unique theme identifier.
- Mode
- Specifies the theme mode (light or dark).
- AccentColor
- Applies a predefined accent color to a Fluent theme.
- ApplyToPageElements
- Specifies whether a theme includes specific styles for non-DevExpress elements (hyperlinks, input/text elements, headings, browser scroll bars, etc.). Set this property to
falseto 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:
<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:
<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:
<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).