Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Radzen Blazor Components Apperance Toggle Not Switching Themes

$
0
0

I've got a .NET 10 Blazor Web App that uses Server Interactive Mode. I'm exploring some of the components that Radzen Blazor offers but cannot seem to get theme switching working. I'm able to configure one of the default themes "humanistic" but am unable to toggle between this and the dark version.

As per documentation I've:

  1. Installed Radzen.Blazor (8.4.1) Nuget Package

  2. Added the imports to the end of _Imports.razor

    @using Radzen@using Radzen.Blazor
  3. Set the theme in the head section of App.razor

    <RadzenTheme Theme="humanistic" @rendermode="InteractiveServer" />
  4. Include Radzen.Blazor.js in App.razor after the last <script> tag

    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
  5. Added RadzenComponents to MainLayout.razor to allow use of Dialogs / Notification / Tooltips / ContextMenu components

    <RadzenComponents @rendermode="InteractiveServer" />
  6. Registered Radzen Components in Program.cs

    builder.Services.AddRadzenComponents();

I've then made a few changes to MainLayout.razor to setup a basic layout using some of the Radzen components:

@inherits LayoutComponentBase<RadzenComponents @rendermode="InteractiveServer" /><RadzenLayout><RadzenHeader><RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start"><RadzenLabel Text="ApplicationName" /><RadzenAppearanceToggle /></RadzenStack></RadzenHeader><RadzenSidebar><RadzenPanelMenu><RadzenPanelMenuItem Text="Home" Path="/" Icon="home" /><RadzenPanelMenuItem Text="Counter" Path="counter" Icon="account_box" /></RadzenPanelMenu></RadzenSidebar><RadzenBody>        @Body</RadzenBody></RadzenLayout>

This all works and I have a basic layout using Radzen and the humanistic theme:
Screenshot of a basic UI using Radzen components

The issue is the RadzenApperanceToggle (highlighted above), doesn't toggle the theme between light (humanistic) and dark (humanistic-dark).

Having reviewed both the documentation and github demos again, I'm not sure on what I'm missing. I know there is the ThemeService (either QueryString or Cookie) but it's not clear if these are required to support basic theme switching.

Is there anything that I've misconfigured or missed?


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>