topic Re: Map Theme Toggle with React in ArcGIS JavaScript Maps SDK Questions

Map Theme Toggle with React

jjgarrett0 — Thu, 30 May 2024 13:09:50 GMT

I'm looking for some help with dynamically setting the map theme for dark and light modes in a React application. The documentation says to import the css file for whichever theme you want, but I would like to be able to toggle a button in the react application to switch it between light and dark. Does anyone have some suggestions?

Re: Map Theme Toggle with React

ReneRubalcava — Thu, 30 May 2024 15:50:50 GMT

There is a calcite tutorial on how to do this you can apply to a react application.

https://developers.arcgis.com/calcite-design-system/tutorials/build-a-dark-mode-switch/

The main thing to know is this part of the tutorial.

const updateDarkMode = () => { // Calcite mode document.body.classList.toggle("calcite-mode-dark"); // ArcGIS Maps SDK theme const dark = document.querySelector("#arcgis-maps-sdk-theme-dark"); const light = document.querySelector("#arcgis-maps-sdk-theme-light"); dark.disabled = !dark.disabled; light.disabled = !light.disabled; // ArcGIS Maps SDK basemap map.basemap = dark.disabled ? "gray-vector" : "dark-gray-vector"; // Toggle ArcGIS Maps SDK widgets mode const widgets = document.getElementsByClassName("esri-ui"); for (let i = 0; i < widgets.length; i++) { widgets.item(i).classList.toggle("calcite-mode-dark"); } }; document.querySelector("calcite-switch").addEventListener("calciteSwitchChange", updateDarkMode);

Re: Map Theme Toggle with React

jjgarrett0 — Fri, 31 May 2024 16:35:44 GMT

Thanks I'll give that a shot.