nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Toggling Light/Dark theme programmatically API 4.x

RichardMoussopo

The API provides two different css files for light and dark theme. I am trying to figure out a better way of switching theme on toggle button click. I've tried unloading the light css file then load the dark css file and I am not impressed with this approach. Does anybody out there ever tried this?

Thank you

Find more posts tagged with

Accepted answers

RRubalcava

I don't know how you're updating it, but you can just update the href of the link tag.

let theme = "dark";
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";
    }
});

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

All comments

LindaCecilieKjeldsen

This seems to no longer function for the popup? It seems "something" happened around version 4.25..? It is possible to make the popup light if you import light stylesheet, and dark if you import dark. But if you switch in runtime, nothing happens in the popup.

René_Ténière

René,

How do you listen for changes to the theme? I have developed a widget and would like to listen for the theme changes for the internal CSS.

Thanks,

René T.

RichardMoussopo

Thank you Rene, I am using React but this did the trick. I really appreciated

RRubalcava

I don't know how you're updating it, but you can just update the href of the link tag.

let theme = "dark";
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";
    }
});

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.