Search code examples
angularsyncfusionej2-syncfusion

Syncfusion for Angular - Theme toggling: any straightforward approach to toggle between normal/dark theme?

I found this solution in Syncfusion Knowledge base forum. Knowledge base provided approach

HTML

<head>

    //...
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">

    //add style tag for dynamic theme change
    <style id="theme"></style> 

</head>
<body>
    <div id='container'>
    //...
    </div> 
</body>

JS

function(e) {
     if (e && e.value) {
           let ajax: Ajax = new Ajax('assets/styles/' + e.value + '.css', 'GET', true);
           ajax.send().then((result: any) => {
                 let styleTag = document.getElementById('theme');
                 styleTag.innerHTML=`/*${e.itemData.value}*/` + result;     
           });
      }
}

Requirement is to change the theme of all Syncfusion components in the app at run time, eg: a darkmode button will toggle material.css to material-dark.css at runtime Looking for opinion on better/simpler approach.

Solution

  • We suspect that you want to change the theme from material.css to material-dark.css using the button for the Syncfusion component. We have created a simple sample using the button method to change the theme from material.css to material-dark.css. 

    https://stackblitz.com/edit/hufrxk?file=index.js

    Regards, Arun