We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

toggle Dark mode

how to switch to dark mode of each component when an event is clicked, using the material theme


1 Reply 1 reply marked as answer

VB Vinitha Balasubramanian Syncfusion Team October 13, 2022 12:22 PM

Hi Jean Michael Caiza Montece,


Greetings from Syncfusion support.


From your query, we found that you want to change the Syncfusion components theme programmatically. We have prepared a simple sample to change the theme using external button click function. On that sample we use the Syncfusion CDN styles to achieve this requirement. While using CDN you can achieve this like as below code snippet,


[index.js]


<ButtonComponent onClick={this.changeDarkThemeFn}>

          Dark Theme

        </ButtonComponent>

        <ButtonComponent onClick={this.changeLightThemeFn}>

          Light Theme

        </ButtonComponent>

changeDarkThemeFn() {

    document.getElementById('theme').rel='nofollow' href =

      'https://cdn.syncfusion.com/ej2/material-dark.css';

  }

  changeLightThemeFn() {

    document.getElementById('theme').rel='nofollow' href =

      'https://cdn.syncfusion.com/ej2/material.css';

  }


Sample link : https://stackblitz.com/edit/react-wtzgdt?file=index.js,index.html


Please get back to us if you need further assistance.


Regards,

Vinitha Balasubramanian

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon