How can I set up material light and dark mode in a MAUI or Blazor standalone app?

Radzen.Blazor Components
1

Hi!

I saw that version 5.0.0 has been released, but I couldn't find any documentation on how to set it up in a Blazor application that has an index.html file.

I would like some help with this if possible, with an example code.
Thank you.

2

There isn't an easy way to dynamically change css files with index.html or render a Blazor component. You can try using RadzenTheme in your layout instead.

3

In theory with HeadContent its posible to change css, but then RadzenTheme its overwriting custom css rules. As a workaround i can add other css rules in headcontent, but would be nice to have a better solution to Blazor standalone wasm.

4

Probably adding RadzenTheme there would work (still has to be done in the MainLayout). You can test that.

RadzenTheme only renders a <link> element pointing to the current theme. It is not overwriting any custom CSS rules.

1 Like
5

Thank you, it works with HeadContent.

1 Like
6

Hi Igor,

Can you go into detail on what you did exactly to solve this?

Thanks,

Vincent

7

Hi Vincent,

Example code:

The modified files are index.html, MainLayout.razor, MainPage.xaml.

1 Like