Custom Widget That Implements /esri/themes/

126
0
01-07-2022 08:59 AM
RenéTénière
New Contributor III

Hello,

I am trying to create a widget boiler plate so I can refactor some existing code into widget modules. So far things are working, however, all the examples I have seen require the user to pick the CSS esri theme, i.e. light or dark. I would like to implement not only my own custom light and dark elements, but also utilize the available esri themes. Is there an example out there? So far I have a cringy way of determining the user's preferred stylesheet in their HTML:

 

 

var temptheme = "light";
for (let i=0; i<document.styleSheets.length; i++) {
  let ss = document.styleSheets[i].href;
  console.log(`Stylesheet ${i+1} of ${document.styleSheets.length}: ${ss}`);
  if (ss && ss.split('/assets/esri/themes/').length == 2) {
    temptheme = ss.split('/assets/esri/themes/')[1].split('/')[0];
  }
}
const theme = temptheme.toLowerCase();
console.log(`Theme: ${theme}`);

 

Thanks,

René

0 Kudos
0 Replies