How to use professional theme on custom site

Radzen.Blazor Components
1

I have a custom site that i setup to use default style.
I would like to use the dark style as example as i am professional customer.

i attempted to follow your instructions for updating.
it basically says the following...

i was able to get the body to use the dark theme....
but the nav menu didn't.
this is a custom non radzen app site that is referecing the radzen tools.

Can you provide more specific details for using the professional themes?

Use a premium theme in a custom application

The premium themes are not included in the Radzen.Blazor Nuget package. To use a premium theme in your custom Visual Studio application you need to copy the theme CSS file from an existing Radzen Application.

The location of the theme CSS file depends on the target framework:

  • client\src\app\assets\css in Radzen Angular applications.
  • server\wwwroot\assets\css in Radzen Blazor Server applications.
  • client\wwwroot\assets\css in Radzen Blazor WASM applications.

You also need to copy the fonts directory which is a sibling of the css directory.

1 Like
2

Is this a Radzen Blazor component? Our themes only provide styling for Radzen Blazor components.

The details provided in the documentation is everything needed. I suspect you expect styling of something which may not be a Radzen Blazor component but comes from the default Blazor template.

3

okay, fair assessment. If i want my entire default blazor site, to use radzen theme, which default parts must be modified to achieve this? I will try using radzen menu and see if that does it.

drum roll....success!

Since you are using some fancy metadata...i just did the following after copying from a radzen project the mainlayout to achieve the nice functionality you created with the bouncing body when the menu is toggled..

Thanks!

@code {

RadzenBody body0 { get; set; }
RadzenSidebar sidebar0 { get; set; }

async void SidebarToggle0Click()
{
    await this.InvokeAsync(sidebar0.Toggle);
    await this.InvokeAsync(body0.Toggle);
    await this.InvokeAsync(StateHasChanged);
}

}

image
image1249×788 19 KB