index.html

Question

index.html

sblb 1,231

Hi,

I've created ThemeService.cs to change the rendering place in dropdown box in MainLayout.razor

the theme that is always used is the one in the index.html.

How I can link the ThemeService.cs and index.html or use only the theme that I defined?

Thanks in advance

1 answer

Your answer

Answer 1

Bruce (SqlWork.com) 77,686 Volunteer Moderator

The theme is just a css file. When you choose a new theme you will load a new css file. The css theme files should be designed to override the original theme as that css file is still loaded.

Your other option is when a new theme is chosen, you reload the blazor app via location.reload() and pass the themeid as a query string parameter. This probably the most common website approach as the style tree will be smaller and faster.

sblb 1,231

I defined the theme ThemeService.cs

   public class ThemeService
    {
        public class Theme
        {
            public string? Text { get; set; }
            public string? Value { get; set; }
            public string? Primary { get; set; }
            public string? Secondary { get; set; }
            public string? Base { get; set; }
            public string? Header { get; set; }
            public string? Sidebar { get; set; }
            public string? Content { get; set; }
            public string? TitleText { get; set; }
            public string? ContentText { get; set; }
           
        }
        public static readonly Theme[] Themes = new[]
        {                      
            new Theme {
                Text = "Material",
                Value = "material",
                Primary = "#4340d2",
                Secondary = "#e91e63",
                Base = "#f5f5f5",
                Header = "#4340d2",
                Sidebar = "#ffffff",
                Content = "#ffffff",
                TitleText = "#212121",
                ContentText = "#bdbdbd"
            },          
           
            new Theme {
                Text = "Standard",
                Value = "standard",
                Primary = "#1151f3",
                Secondary = "rgba(17, 81, 243, 0.16)",
                Base = "#f4f5f9",
                Header = "#ffffff",
                Sidebar = "#262526",
                Content = "#ffffff",
                TitleText = "#262526",
                ContentText = "#afafb2"
            },  


......
}


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

@code {
    bool IsTheme => ThemeService.CurrentTheme == "Material" || ThemeService.CurrentTheme == "Standard" || ThemeService.CurrentTheme == "Default" || ThemeService.CurrentTheme == "Dark" || ThemeService.CurrentTheme == "Humanistic" || ThemeService.CurrentTheme =="Software" ;

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

    protected override void OnInitialized()
    {

        ThemeService.Initialize(NavigationManager);

    }
}

In mainlayout.razor I've put dropdown Box to select the several Item

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

The index.html

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

I don't understand the theme from idex.html is always this theme. When I select a new theme in my dropdowm any change.

Have you an idea?

This code is based on this link : https://github.com/radzenhq/radzen-blazor/tree/master/RadzenBlazorDemos

Share via

index.html

1 answer

Your answer