Theme toggle

Radzen.Blazor Components
1

Hi!
facing a peculiar issue in my Dot.net Core 8.0 project.
Nothing happening on clicking theme toggle button in my project. Am I missing out something basic?
my component page

@rendermode InteractiveServer
...
<RadzenStack Orientation="Radzen.Orientation.Vertical" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Gap="2rem" Wrap="FlexWrap.Wrap" class="rz-p-12">
    <RadzenAppearanceToggle />
</RadzenStack>

my App.razor file

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
    <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
    
    <link rel="stylesheet" href="app.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <RadzenTheme Theme="dark-base" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/dark-base.css">
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/light-base.css">

    <HeadOutlet />
</head>
2

Those override whatever is set by RadzenTheme. Remove both lines.

3

=Removing these lines did not work.

original page

image
image2257×1376 181 KB

after removing with `

`

image
image2696×1258 188 KB

4

RadzenTheme doesn't have render mode either. Please check the getting started instructions.

5

I am sorry for dragging it on but not resolving.
changing to

<RadzenTheme Theme="dark-base" @rendermode="InteractiveAuto" />

gives error attribute @rendermode is available only when used on component. how to sort it out?
Thanks for your patience. details would be extremely helpful.

6

This is the first time I see such an error. RadzenTheme is definitely a component :slight_smile:

7

sorted this out. simple, I was missing

@using Radzen
@using Radzen.Blazor

but the main issue still remains. toggle does not work out. also as soon as I remove

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

the formatting goes, and toggle still does not work.
event tried with a button, but doesn't work

 private async Task SwitchToDark()
 {
     ThemeService.SetTheme("light-base");
 }

on the same page other radzen components working

image
image1326×1071 64.5 KB

8

There is no such theme. Also you should not include the theme css file via <link /> if you use RadzenTheme.

If you need further assistance I would recommend checking our support plans.

10 
builder.Services.AddScoped<ThemeService>();

have you registered this ?