How to Change the theme?

I tried to implement the code below :
[radzen-blazor/RadzenBlazorDemos at master · radzenhq/radzen-blazor · GitHub](radzen-blazor/RadzenBlazorDemos at master · radzenhq/radzen-blazor · GitHub)
But there are any change when I selected the theme in RadzenDropDown
I use only the free themes!

Do you change something the in index.html file?
Thanks in advance to your advise?

You can check this thread: Blazor Server - Change Theme Dynamically - #9 by enchev

I've already seen this thread but I follow your code but it doesn't work.
I've created Theme.cs ThemeServices.cs and Modify the MainLayout.cs

I think I have to change something to index.html e.g add the id = "theme" in
<link id="theme" rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
and add script in javascript;
Have you any suggestion?

I've point a breakpoint to ChangeTheme and the value selected is good!

The application is blocked when the url: https:/.../?theme=drak (eg)

This means it doesn't know this address!

I recommend you check the sample application. All source is in github. The code which renders the theme is here:

And it is used in _Host.cshtml like this:

You can change the implementation to your needs and requirements. All you have to do is include the right CSS file.

Thank you I tried to do it
so I work in blazor WebAssembly this means I've to modify index.html files?
I've to include in wwwroot the CSS file?

As far as I know you can't include any Blazor components in index.html - they should either be included in a .cshtml file or .razor file :slight_smile: And no, you don't have to copy any CSS theme to wwwroot. Check the getting started instructions how to include a theme CSS file - it shows what the path is. Our online demos is also a WebAssembly applications but it uses prerendering (hence no index.html but _Host.cshtml). You can probably add the theme in MainLayout.razor.

I guess that you make at <link id="theme" rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css"> to include the css fi'e

How to include the theme in mainlayout.razor?

If I've put the theme in mainlayout I 've to do link with index.html

Eg in mainlayout. Razor

public void OnThemeChange(ChangeEventArgs<string, ThemeDetails> args)
        JSRuntime.InvokeAsync<object>("setTheme", args.ItemData.ID);                

And create the javascript in index. Html.

Is that correct?
Is that what you were thinking?

No, you don’t need javascript. Check the example I’ve linked everything is in there.

I tried to implement the Theme in MainLayout and it doesn't work !

  <RadzenDropDown Class="rz-mx-0 rz-mx-lg-4" id="themes" style="width: 220px;" 
                                   TValue="string" TextProperty="Text" ValueProperty="Value" Value="CurrentTheme" Data="@Themes" Change="@ChangeTheme" >

 public const string DefaultTheme = "Software";
    public const string QueryParameter = "theme";

    public string CurrentTheme { get; set; } = DefaultTheme;
    public class Theme
        public string? Text { get; set; }
        public string? Value { get; set; }

    private List<Theme> Themes = new List<Theme>() {
         new Theme(){ Text = "material", Value = "Material" },
         new Theme(){ Text = "standard", Value = "Standard" },
         new Theme(){ Text = "default", Value = "Default" },
         new Theme(){ Text = "dark", Value = "Dark" },
         new Theme(){ Text = "humanistic", Value = "Humanistic"},
         new Theme(){ Text = "software", Value = "Software" },       
     void ChangeTheme(object value)
        var url = UriHelper.GetUriWithQueryParameter("theme", $"{value}");

        UriHelper.NavigateTo(url, true);


I don't understand why?

You can probably add the theme in MainLayout.razor.

You right. I added the Theme.cs in MainLayout.cs all things works perfectly!!

Thank you to your recommendation!