https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-widget-that-implements-esri-themes/m-p/1131642#M75842 <P>Hello,</P><P>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:</P><DIV>&nbsp;</DIV><P>&nbsp;</P><LI-CODE lang="javascript">var temptheme = "light"; for (let i=0; i&lt;document.styleSheets.length; i++) { let ss = document.styleSheets[i].href; console.log(`Stylesheet ${i+1} of ${document.styleSheets.length}: ${ss}`); if (ss &amp;&amp; ss.split('/assets/esri/themes/').length == 2) { temptheme = ss.split('/assets/esri/themes/')[1].split('/')[0]; } } const theme = temptheme.toLowerCase(); console.log(`Theme: ${theme}`);</LI-CODE><P>&nbsp;</P><P>Thanks,</P><P>René</P> Fri, 07 Jan 2022 16:59:36 GMT René_Ténière 2022-01-07T16:59:36Z https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-widget-that-implements-esri-themes/m-p/1131642#M75842 <P>Hello,</P><P>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:</P><DIV>&nbsp;</DIV><P>&nbsp;</P><LI-CODE lang="javascript">var temptheme = "light"; for (let i=0; i&lt;document.styleSheets.length; i++) { let ss = document.styleSheets[i].href; console.log(`Stylesheet ${i+1} of ${document.styleSheets.length}: ${ss}`); if (ss &amp;&amp; ss.split('/assets/esri/themes/').length == 2) { temptheme = ss.split('/assets/esri/themes/')[1].split('/')[0]; } } const theme = temptheme.toLowerCase(); console.log(`Theme: ${theme}`);</LI-CODE><P>&nbsp;</P><P>Thanks,</P><P>René</P> Fri, 07 Jan 2022 16:59:36 GMT https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/custom-widget-that-implements-esri-themes/m-p/1131642#M75842 René_Ténière 2022-01-07T16:59:36Z