Select to view content in your preferred language

Applying theme to popups

578
1
Jump to solution
02-28-2022 11:49 PM
AnantSharma
Emerging Contributor

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 

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?
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Honored Contributor

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 

View solution in original post

1 Reply
ReneRubalcava
Honored Contributor

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