0

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.

Aruna101
  • 52
  • 7
  • You could use javascript to achieve that with the command: `document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');` Instead of having multiple css files, you'll just need to have multiple configurations for all your themes (IE: light, dark, green, ...) – Jacopo Sciampi Mar 12 '23 at 14:07
  • I'm using third-party components. In my case its Syncfusion. They provide set of themes out of the box for each component. I guess switching CSS at runtime is more convenient in this case – Aruna101 Mar 13 '23 at 16:01

2 Answers2

0

Here is some (simplified) code I use to allow the user to switch between themes using a drop-down. In my case, I use Syncfusion JS2 components, but the principle is the same.

findlinkhref = document.getElementById("myLinkId").href;
    
var dropDown = new ej.dropdowns.DropDownList({
      index: dropDownIndex,
      width: 115,
      dataSource: [
        { value: "material-dark", text: "Mat-Dark" },
        { value: "material", text: "Material" }
      ],
      change: function(args) {        
        var findlink = document.getElementById("myLinkId");         
        if (args.itemData.value == "material" && findlink.href != "https://.../material.min.css") {
          findlink.href = "https://.../material.min.css"; 
        } else if (args.itemData.value == "material-dark" && findlink.href != "https://.../material-dark.min.css") {   
          findlink.href = "https://.../material-dark.min.css";
        } 
      }
    });
    dropDown.appendTo("#theme-dropdown");

In the Header of the page I have the following CSS with an ID of "myLinkId":

<link id="myLinkId" href="https://.../material-dark.min.css" rel="stylesheet">
MilletSoftware
  • 3,521
  • 2
  • 12
  • 15
  • What about storing CSS files in assets/styles folder (in anguler) and use JS to switch between them ? IE: in index.html then use JS to change href. Is that possible, i doubt about serving css from assets/styles folder – Aruna101 Mar 13 '23 at 16:03
  • THe <...> in the href paths referenced in my sample code stand for . Of course, you are free to use whatever path to the location of your css files. – MilletSoftware Mar 13 '23 at 17:05
0

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

Arun
  • 176
  • 6