CSS Variables in Fluent Themes
- 4 minutes to read
Fluent Themes change DevExpress Blazor UI Control appearance: colors, font settings, spacing, and border styles. Technically speaking, a theme changes values for a number of CSS variables. DevExpress components reference these variables and thus application appearance adapts dynamically to the active theme.
Refer to Design System help topics for more information about key styling principles and a list of CSS variables available in DevExpress Blazor Fluent themes.
Examples below use public CSS variables in the following scenarios:
- Apply theme style to native HTML elements.
- Customize DevExpress Blazor components and their elements.
- Change the application’s brand (primary) color.
We recommend that you store all CSS rules in separate stylesheets and pass them as parameters to the AddFilePath() method (when you apply a custom Fluent theme).
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Custom Fluent";
properties.AddFilePaths("css/CustomStyles.css");
}))
CSS API Naming Conventions
In Fluent themes, DevExpress Blazor components rely on the following CSS variables and classes:
--dxds-*- Design System CSS variables that serve as public APIs. Use these variables to customize your Blazor application.
--dxbl-*- Internal CSS variables and classes used by DevExpress Blazor components. May change between versions.
--dxbrv-*- Internal CSS variables and classes used by the DevExpress Blazor Report Viewer. May change between versions.
We recommend that you do not use internal variables and classes to customize your Blazor application. Use public --dxds-* variables only.
Apply Theme Styles to Native HTML Elements
This example customizes native HTML elements as follows:
<div class="container-with-devexpress-styles">- Changes background color, font settings, and paddings.
<p class="hovered">- Applies the Fluent theme’s primary background color on hover.
<p class="utility-blue">- Applies the utility-blue background color and neutral text color.
<p class="danger">- Applies the danger text color.
<div class="container-with-devexpress-styles">
<h4>Use DevExpress CSS Variables to Style Native HTML Elements</h4>
<p>This section contains native HTML elements that use DevExpress CSS variables to customize background and text colors, font settings, and paddings.</p>
<p class="hovered">
This paragraph uses the Fluent theme <i>primary</i> background color on hover.
</p>
<p class="utility-blue">
This paragraph uses the <i>utility-blue</i> background color.
</p>
<p class="danger">
This paragraph uses the <i>danger</i> text color.
</p>
</div>
Use CSS Variables for Style Isolation
You can use DevExpress CSS variables for style isolation. In the following example, both DevExpress Blazor Buttons apply the Fluent theme’s primary color scheme:
- The first button uses the default background color.
- The second button uses the overridden background color.
<DxButton RenderStyle="ButtonRenderStyle.Primary"
Text="Default Primary"></DxButton>
<DxButton RenderStyle="ButtonRenderStyle.Primary"
Text="Overridden Primary"
CssClass="button-with-custom-background"></DxButton>
Customize Elements Within DevExpress Components
You can use DevExpress CSS variables to customize individual elements within DevExpress components. In the following example, the Grid uses the Fluent theme primary color to change header cell and hovered row appearance (in the CustomizeElement event handler):
<DxGrid Data="Customers"
CssClass="grid-with-custom-styles"
HighlightRowOnHover="true"
CustomizeElement="OnCustomizeElement">
<Columns>
<DxGridDataColumn Caption="Name" FieldName="Name" />
<DxGridDataColumn Caption="Age" FieldName="Age" />
</Columns>
</DxGrid>
@code {
List<Customer> Customers { get; set; } = new List<Customer>() {
new Customer() { Name = "John Smith", Age = 35 },
new Customer() { Name = "Anne Williams", Age = 40 },
new Customer() { Name = "Darren Park", Age = 25 }
};
private void OnCustomizeElement(GridCustomizeElementEventArgs args) {
if(args.ElementType == GridElementType.HeaderCell) {
args.CssClass = "custom-grid-header";
}
}
}
Change the Application Accent (Brand) Color
The DevExpress theming algorithm uses a primary (accent) color to generate its associated color scale – lighter or darker shades. 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:
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Custom Fluent";
properties.AddFilePaths("css/FluentPrimary.css");
}))
Alternatively, you can change the accent color using the built-in Fluent theme APIs:
- AccentColor
- Applies a predefined accent color to a Fluent theme.
- SetCustomAccentColor(String)
- Applies a custom accent color to a Fluent theme.
Refer to the following help topic for additional information: Accent Colors in Fluent Themes.