Applying theme to popups

AnantSharma — Tue, 01 Mar 2022 07:49:33 GMT

Hi,
I am trying to apply day and night theme to my popups on click of btn. For example if day theme btn is clicked popup should appear in day theme and for night theme same popup should appear with night theme.

I am using

@import url('https://js.arcgis.com/4.14/esri/themes/light/main.css'); ----> for day

@import url('https://js.arcgis.com/4.14/esri/themes/dark/main.css'); -----> for night

in my .css file, but it's not importing dynamically(on btn click). I have to comment and uncomment it manually.
So is there any way to make the theming dynamic i.e on click of btn theme will change for popups?

Re: Applying theme to popups

ReneRubalcava — Tue, 01 Mar 2022 14:35:22 GMT

You can switch the themes dynamically at runtime with something like this.

btn.addEventListener("click", () => { if (theme === "light") { sheet.href = "https://js.arcgis.com/4.22/esri/themes/dark/main.css"; theme = "dark"; } else if (theme === "dark") { sheet.href = "https://js.arcgis.com/4.22/esri/themes/light/main.css"; theme = "light"; } });

Here is a demo

https://codepen.io/odoe/pen/oNoQZNW?editors=1000

topic Applying theme to popups in ArcGIS JavaScript Maps SDK Questions

Applying theme to popups

Re: Applying theme to popups