Where to put RadzenTheme tag in WASM app

Radzen.Blazor Components
1

the getting started states:

3. Set the themelink

Open the App.razor file of your application. Add this code within the <head> element:

<RadzenTheme Theme="material" @rendermode="InteractiveAuto" />

but in a wasm app the head and body tags are in the index.html file not the App.razor file, where should we put RadzenTheme tag in a wasm app using an index.html file?

2

Try this line in the head section of index.html
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
and use material or other theme name as a name of css file. In the line above insted of default-base.

3

There is a special section for WASM in our getting started instructions.

4

Hi I have just been looking at the Theme Service does this not work in WASM applications? My setup is working but the Theme Service doesn't change the theme.

5

Our demos are WASM application.

6

Thanks, I have tried to intergrate the Theme service but although I can call Them.SetTheme the Theme doesn't change.

I have setup this in the program.cs

builder.Services.AddRadzenComponents();
builder.Services.AddRadzenCookieThemeService(options =>
{
    options.Name = "Theme"; // The name of the cookie
    options.Duration = TimeSpan.FromDays(365); // The duration of the cookie
});

I then Inject the ThemeService on a page and call ThemeService.SetTheme(value); but nothing changes

7

You can compare your implementation to our demos, the entire source code is available for free.

8

Thanks Enchev, I have tried to do this but the demo setup looks different to mine. I have a single Blazor Web Assembly standalone application, my App.razor file looks like the RadzenBlazorDemos project but I am unable to run this directly. I have to run through RadzenBlazorDemos.Host The setup in this project is completely different. Is this expected or should I be able to directly run the RadzenBlazorDemos project?

I don't know if this is significant but I load the theme in the Index.html in the wwwroot folder by adding this line in the header

<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">

Thanks

9

Found a way to use RadzenTheme in standalone WASM app. Put it in your MainLayout.razor like this:

<HeadContent>
    <RadzenTheme Theme="material" />
</HeadContent>

Then it should play nicely with the ThemeService and you would be able to switch themes at runtime.

Will update the getting started instructions shortly.

2 Likes
10

That's Awesome thanks working now :smile: