Applying theme to popups

AnantSharma

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?

ReneRubalcava

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