Map Theme Toggle with React

Question

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?

RRubalcava · Accepted Answer

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);