blazor-405705-styling-and-themes-fluent-theme-customization-fluent-css-variables.md
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 additional 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:
View Example: Use CSS Variables to Customize DevExpress Fluent Themes
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");
}))
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.
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>
.container-with-devexpress-styles {
font-size: var(--dxds-font-size-base-md);
font-weight: var(--dxds-font-weight-base-default);
padding: var(--dxds-spacing-160);
background-color: var(--dxds-color-surface-primary-subdued-rest);
}
.container-with-devexpress-styles strong {
font-weight: var(--dxds-font-weight-base-stronger);
}
.container-with-devexpress-styles .utility-blue {
background-color: var(--dxds-color-surface-utility-blue-default-rest);
color: var(--dxds-neutral-10);
}
.container-with-devexpress-styles .danger {
color: var(--dxds-color-content-danger-default-rest);
}
.container-with-devexpress-styles .hovered:hover {
background-color: var(--dxds-color-surface-primary-subdued-hovered);
}
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:
<DxButton RenderStyle="ButtonRenderStyle.Primary"
Text="Default Primary"></DxButton>
<DxButton RenderStyle="ButtonRenderStyle.Primary"
Text="Overridden Primary"
CssClass="button-with-custom-background"></DxButton>
.button-with-custom-background {
--dxds-color-surface-primary-default-rest: var(--dxds-color-surface-utility-green-default-rest);
}
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";
}
}
}
.grid-with-custom-styles {
--dxds-color-surface-neutral-default-hovered: var(--dxds-color-surface-primary-default-hovered);
--dxds-color-content-neutral-default-hovered: var(--dxds-color-content-neutral-default-static-dark-hovered);
}
.grid-with-custom-styles .custom-grid-header {
background-color: var(--dxds-color-surface-primary-default-rest) !important;
color: var(--dxds-color-content-neutral-default-static-dark-hovered) !important;
}
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");
}))
: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;
}
Alternatively, you can change the accent color using the built-in Fluent theme APIs:
AccentColorApplies 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.