Light and dark theme

Radzen.Blazor Components
1

I Implemented fluent dark theme and fluent light theme toggle .on button click is working fine in vs.
1.I used radzen theme service.
But when i m system default dark theme that time first show light theme for a few a minute the show light theme. how can handle this? i need when i m on dark mode show immediately dark mode ?

2.I need change header color for light theme and dark theme. On light theme separate color and dark theme separate color.but not change fluent primary color .how can change

2

I'm not sure what code you've used however there is no such problem on our demos:
change-theme

Didn't understood this. Please provide more details.

3

For both the light and dark themes, I need to adjust the header color. For both light and dark themes, use different colors.but retain the primary color fluency.how one can alter

1 Like
4

Hi @AnkitaC,

This isn't directly supported at the moment but you can try the following:

  1. Pick your colors in Radzen Blazor Studio theme editor for the light theme
  2. Open site.css and replace :root with a CSS class of your choice e.g. .rz-fluent-light
  3. Get back to the theme editor
  4. Select the dark theme and click the Reset button
  5. Pick your colors for the dark theme
  6. Reopen site.css and replace the newly generated :root with .rz-fluent-dark
  7. Add and change the respective CSS class to the <body> tag in App.razor
<body class=@($"rz-{ThemeService.CurrentTheme}")>

This assumes you are using some service that maintains the current theme.

We plan to make this procedure easier with the upcoming 5.0 version of the Radzen.Blazor components.

1 Like