Blazor - Use CSS Variables to Customize DevExpress Fluent Themes

This example customizes a DevExpress-powered Blazor application using DevExpress CSS variables available in Fluent themes. DevExpress Blazor components ship with a predefined set of CSS variables that define component appearance (once you apply a Fluent theme to your application). You can use these DevExpress CSS variables as follows:

• Style native HTML elements to maintain a consistent look across your application.
• Customize built-in DevExpress Blazor components.

Refer to the Design System help topics to learn more about key styling principles and see full lists of CSS variables available in DevExpress Blazor Fluent themes.

Implementation Details

This example customizes native HTML and DevExpress elements using CSS classes. The example stores CSS rules in a separate dx-variables.css stylesheet and passes it as a parameter to the AddFilePath method when you register a Fluent theme.

Use DevExpress CSS Variables to Style Native HTML Elements

This example assigns the folowing CSS classes to native HTML elements:

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

.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);
}

Use CSS Variables for Style Isolation

You can use DevExpress CSS variables for style isolation. In this example, both DevExpress Blazor Buttons utilize 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 RenderStyle="ButtonRenderStyle.Primary"
          Text="Overridden Primary"
          CssClass="button-with-custom-background" />

.button-with-custom-background {
    --dxds-color-surface-primary-default-rest: var(--dxds-color-surface-utility-green-default-rest);
}

Use DevExpress CSS Variables to Customize Elements Within DevExpress Components

You can utilize DevExpress CSS variables to customize individual elements within DevExpress components. The Grid below uses the Fluent theme primary color to change header cell and hovered row appearance (via the CustomizeElement event):

<DxGrid Data="Customers"
        CssClass="grid-with-custom-styles"
        HighlightRowOnHover="true"
        CustomizeElement="OnCustomizeElement">
    <Columns>
        @* ... *@
    </Columns>
</DxGrid>

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;
}

Files to Review

• Index.razor
• App.razor
• dx-variables.css

Documentation

• Design System Foundation
• CSS Variables in DevExpress Blazor Fluent Themes
• CSS Customization: Inspect CSS Rules
• Styling and Themes: Customize a Theme

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)