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 · Accepted solution]

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