Index.razor

@page "/"
@rendermode InteractiveServer
@using DxThemeVariablesExample.Models

<h1>Fluent Theme CSS Customization</h1>

<p>
    This example customizes a Blazor application using DevExpress CSS variables (available in Fluent themes only).
    These CSS variables define the appearance of all DevExpress Blazor components once you apply a Fluent theme to your application.
    You can use or override DevExpress CSS variables to style native HTML elements or built-in DevExpress Blazor components.
</p>

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

<div>
    <h4>Use CSS Variables for Style Isolation</h4>

    <p>
        You can use DevExpress CSS variables for style isolation. The following buttons (<code>DxButton</code> components) utilize the Fluent theme <i>primary</i> color scheme:
        <ul>
            <li>The first button uses the default background color.</li>
            <li>The second button uses the overridden background color.</li>
        </ul>
    </p>

    <DxButton RenderStyle="ButtonRenderStyle.Primary"
              Text="Default Primary"></DxButton>
    <DxButton RenderStyle="ButtonRenderStyle.Primary"
              Text="Overridden Primary"
              CssClass="button-with-custom-background"></DxButton>
</div>

<div>
    <h4> Use DevExpress CSS Variables to Customize DevExpress Elements </h4>
    <p>
        You can use DevExpress CSS variables to customize individual DevExpress elements. The Grid below uses the Fluent theme <i>primary</i> color to change the appearance of header cells and hovered rows.
    </p>

    <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>
</div>

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