How to Change the theme?

SCosmos · July 24, 2023, 3:24pm

Hi,
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?

korchev · July 24, 2023, 3:26pm

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

SCosmos · July 24, 2023, 4:13pm

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!

korchev · July 24, 2023, 5:00pm

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

github.com

radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos.Host/Theme.razor

@inject NavigationManager NavigationManager
@inject ThemeService ThemeService

<link href="@Href" rel="stylesheet" />

@code {
    bool IsPremiumTheme => ThemeService.CurrentTheme == "fluent" || ThemeService.CurrentTheme == "material-dark";

    string Href => IsPremiumTheme ? $"/css/{ThemeService.CurrentTheme}-base.css" : $"_content/Radzen.Blazor/css/{ThemeService.CurrentTheme}-base.css";

    protected override void OnInitialized()
    {
        ThemeService.Initialize(NavigationManager);
    }
}

And it is used in _Host.cshtml like this:

github.com

radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos.Host/Pages/_Host.cshtml#L37


      
          
          
        a {
                      color: var(--rz-link-color);
                  }
          
          
        a:hover,
                  a:focus {
                      color: var(--rz-link-hover-color);
                  }
              </style>
              <component type="typeof(RadzenBlazorDemos.Shared.Theme)" render-mode="Static" />
              <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.min.css">
          </head>
          <body class="rz-scrollbars">
              <component type="typeof(RadzenBlazorDemos.App)" render-mode="WebAssemblyPrerendered" />
              <div id="blazor-error-ui">
                  <environment include="Staging,Production">
                      An error has occurred. This application may no longer respond until reloaded.
                  </environment>
                  <environment include="Development">
                      An unhandled exception has occurred. See browser dev tools for details.

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

SCosmos · July 24, 2023, 5:14pm

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?

korchev · July 24, 2023, 5:23pm

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

SCosmos · July 24, 2023, 5:36pm

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?

korchev · July 24, 2023, 6:08pm

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

SCosmos · July 24, 2023, 9:40pm

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" >
  </RadzenDropDown>

@code{

 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?

SCosmos · July 25, 2023, 7:51pm

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!