Telerik Forums / UI for Blazor

How does the dark or light theme change button on demo page (red circled in the attached image) work ?

1 Answer 101 Views
General Discussions
Milind
Top achievements
Rank 1
Milind asked on 22 Aug 2022, 11:14 AM
Screenshot-TelerikBlazor.png

Hello,

Please see attached image. How does the dark or light theme change button on demo page (red circled in the attached image) work ?

Can someone share the code associated with it ?

Thanks & regards,

Milind

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 24 Aug 2022, 08:27 AM

Hi Milind,

The idea is similar to this example.

  • The button toggles a data attribute value on the <html> element.
  • The website styles depend on that value. The loaded stylesheet contains styles for both the light and dark mode, to ensure immediate switch of the appearance.

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Milind
Top achievements
Rank 1
commented on 24 Aug 2022, 10:12 AM

Hello Dimo,

 

Thanks a lot.

Regards,

Milind

Tags
General Discussions
Asked by
Milind
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or