Blazor Server - Change Theme Dynamically

anthonyyott · October 1, 2020, 7:28pm

Hello, is there a way to dynamically change the theme? The way you do it on your blazor.radzen.com site would be an ideal solution. Is that possible? If so could you provide a sample?

Thank you

enchev · October 1, 2020, 7:42pm

Hey @anthonyyott,

You can use the same approach as in our demos - here is the source code:

anthonyyott · October 2, 2020, 3:09pm

Thank you. That was very helpful

TigerZen · September 9, 2022, 7:25am

Can you please update the link? It just points to the github project now.

I could not find anything there, on how to change the theme dynamically.

enchev · September 9, 2022, 7:29am

The link points exactly where it should, the project of our demos where the theme is changed dynamically:

If you care to open the project you will find:

github.com

radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Shared/MainLayout.razor#L31


      
                          <RadzenSidebarToggle Click="@(args => { sidebarExpanded = !sidebarExpanded; bodyExpanded = !bodyExpanded; })">
                          </RadzenSidebarToggle>
                          <RadzenLabel Text="Radzen Blazor Components">
                          </RadzenLabel>
                      </div>
                      <div class="col-7 d-flex align-items-center justify-content-end">
                          <div class="d-none d-md-inline-flex align-items-center">
                              <a href="/docs/" title="Radzen Blazor Components Documentation" class="mx-2 mx-lg-3" target="_blank">Documentation</a>
                              <a href="https://www.radzen.com/" title="Create .NET Core web applications fast & easy" class="text-nowrap mx-2 mx-lg-3" target="_blank">About Radzen</a>
                          </div>
                          <RadzenDropDown class="mx-0 mx-lg-3" TValue="string" TextProperty="Text" ValueProperty="Value" Data="@ThemeService.Themes" Value="@ThemeService.CurrentTheme" Change="@ChangeTheme" />
                          <a href="https://github.com/radzenhq/radzen-blazor" title="GitHub" target="_blank" class="mx-3">
                              <svg width="24" height="24" viewBox="0 0 512 499.36" xmlns="http://www.w3.org/2000/svg">
                              <title>GitHub</title>
                              <path fill="black" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path>
                              </svg>
                          </a>
                      </div>
                  </div>
              </ChildContent>
          </RadzenHeader>

github.com

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

@inject NavigationManager NavigationManager
@inject ThemeService ThemeService
<link href="_content/Radzen.Blazor/css/@(ThemeService.CurrentTheme).css" rel="stylesheet" />
@code {
    protected override void OnInitialized()
    {
        ThemeService.Initialize(NavigationManager);
    }
}

github.com

radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Services/ThemeService.cs

using System;
using System.Linq;
using System.Web;
using Microsoft.AspNetCore.Components;

namespace RadzenBlazorDemos
{
    public class ThemeService
    {
        public class Theme
        {
            public string Text { get; set; }
            public string Value { get; set; }
        }
        public static readonly Theme[] Themes = new [] 
        {
            new Theme { Text = "Default Theme", Value = "default"},
            new Theme { Text = "Dark Theme", Value="dark" },
            new Theme { Text = "Software Theme", Value = "software"},
            new Theme { Text = "Humanistic Theme", Value = "humanistic" },

This file has been truncated. show original

and other useful stuff that might help you to do the same in your own app.

Gilberto_Carcano · January 5, 2023, 4:21pm

Could you tell me where to put (use) the Theme component in a WASM app? I cannot find it in the RadzenBlazorDemos projects.
Thanks.

enchev · January 5, 2023, 4:27pm

Hey @Gilberto_Carcano,

Our demos are now WASM app and the themes DropDown is again at the same place:

github.com

radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Shared/MainLayout.razor#L29


      
              <RadzenSidebarToggle Click="@(args => { sidebarExpanded = !sidebarExpanded; bodyExpanded = !bodyExpanded; })">
              </RadzenSidebarToggle>
              <RadzenLabel Text="Radzen Blazor Components" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
              </RadzenLabel>
          </div>
          <div class="col-7 d-flex align-items-center justify-content-end">
              <div class="d-none d-md-inline-flex align-items-center">
                  <a href="/docs/" title="Radzen Blazor Components Documentation" class="mx-2 mx-lg-3" target="_blank">Documentation</a>
                  <a href="https://www.radzen.com/" title="Create .NET Core web applications fast & easy" class="text-nowrap mx-2 mx-lg-3" target="_blank">About Radzen</a>
              </div>
              <RadzenDropDown class="mx-0 mx-lg-3" id="themes" style="width: 220px;" TValue="string" TextProperty="Text" ValueProperty="Value" Data="@ThemeService.Themes" Value="@ThemeService.CurrentTheme" Change="@ChangeTheme" >
                  <ValueTemplate>
                      @context.Text Theme
                  </ValueTemplate>
                  <Template>
                      <div style="display: flex; align-items: center; gap: 1rem;">
                          <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: 4px; oveflow: hidden; outline: var(--rz-input-border); min-width: 80px;">
                              <rect width="80" height="60" fill="@context.Base"/>
                              <rect x="0" y="4" width="16" height="56" fill="@context.Sidebar"/>
                              <rect x="24" y="17" width="48" height="32" rx="2" fill="@context.Content"/>
                              <rect x="43" y="41" width="12" height="4" rx="1" fill="@context.Secondary"/>

Gilberto_Carcano · January 6, 2023, 9:08am

Hi @enchev, thank you for your quik reply.
The "Theme" component I was talking about is the one defined in radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Theme.razor. I didn't see any place where the component is used. For my understanding, this component is the responsible for the effective css changes. I tried to put it at the beginning of MainLayout.razor and it seem to work correctly. Is that the right place?
Thanks in advance.

enchev · January 6, 2023, 9:14am

If you get the entire solution you can easily find what you are looking for:

Gilberto_Carcano · January 6, 2023, 10:01am

Thank you, it was exactly what I was searching for!

Duy_Kh_ng · June 27, 2023, 8:50am

I save theme into localStorage and then call it from next, but my website always automatic reload, i dont know how?