Switching Dark & Light Mode

Radzen.Blazor Components
1

Hi Team

We have to implement switching dark and Light mode with Theam css provided by radzen.

We have implemented a Theam service to switch team from once mode to another mode. it is working fine when user interact

but we issue.

Issue: When user switch to dark from light with css Theam service when user refresh screen we see Theam flickering issue.

and as there is requirement we need to pick default Theam based on the browser mode

can any once help me to fix this. by providing any code or samples.

Regards,
Prem Kumar Badri.

2

You can check my reply here:

3

we implemented in way

  1. Created Theam Service and default Theam is Fluent-base.css.
  2. We called the Theam service from mainlayout init.
  3. Based on the system/browser mode we are changing the Theam.

Now problem is on every call theam switching from fluent-base.css to dark.css

4

You should change your implementation similar to our demos if you don’t want flickers.

5

Hi,

To address the flickering issue when switching between dark and light modes in Radzen ; you can consider storing the user's theme preference using local storage or cookies. Below is a TypeScript snippet demonstrating how you can implement this:

// TypeScript snippet for theme management import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class ThemeService { // Define theme classes and preference key // Implement methods for toggling, setting, and retrieving themes // Use local storage to store the theme preference // Detect browser's theme preference }

You can adapt this code to your Radzen application.

Hope this helps !

Thank you
nolanmaris