DxThemeBase<TProps>.Clone(Action<TProps>) Method

Clones a built-in DevExpress Blazor theme or applies a Bootstrap external theme.

Assembly : DevExpress.Blazor.Resources.v25.2.dll

NuGet Package : DevExpress.Blazor.Resources

Declaration

csharp

public ITheme Clone(
    Action<TProps> modifier
)

Parameters

Name	Type	Description
modifier	Action<TProps>

A delegate method that configures theme properties.

Returns

Type	Description
ITheme

The theme.

Remarks

Call the RegisterTheme(ITheme) method in the App.razor file to register a theme in your Blazor application. You can choose a theme from the built-in theme collection or create a new theme using the Clone() method.

The Clone method accepts theme properties as a parameter:

ThemeProperties for built-in classic ( Blazing Berry , Blazing Dark , Office White , and Purple ) and Bootstrap external themes.
ThemeFluentProperties for Fluent themes.

Note

Bootstrap themes require theme-specific stylesheets. Once you pass the BootstrapExternal option to the RegisterTheme method, call the Clone method and add an appropriate stylesheet using theme properties.

Office White Custom
Pulse Bootswatch
Fluent Dark Purple
Fluent Light Custom

razor

<head>
    @*...*@
    @DxResourceManager.RegisterTheme(Themes.OfficeWhite.Clone(properties => {
        properties.Name = "Office White Custom";
        properties.AddFilePaths("css/OWCustomStyles.css")
    }))
</head>

razor

<head>
    @*...*@
    @DxResourceManager.RegisterTheme(Themes.BootstrapExternal.Clone(properties => {
        properties.Name = "Pulse Bootswatch";
        properties.AddFilePaths("css/pulse/bootstrap.min.css");
    }))
</head>

razor

<head>
    @*...*@
    @DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
        properties.Name = "Fluent Dark Purple";
        properties.Mode = ThemeMode.Dark;
        properties.AccentColor = ThemeFluentAccentColor.Purple;
    }))
</head>

razor

<head>
    @*...*@
    @DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
        properties.Name = "Fluent Light Custom";
        properties.SetCustomAccentColor("#107c41");
        properties.AddFilePaths("css/fluent/FluentCustomStyles.css");
    }))
</head>