feat: add high contrast sample

Author: geospatialem

demos/high-contrast/app.js

@@ -1,26 +1,72 @@
-const toggleModeEl = document.getElementById("toggle-mode");
-const mapEl = document.querySelector("arcgis-map");
-const darkModeCss = document.getElementById("jsapi-mode-dark");
-const lightModeCss = document.getElementById("jsapi-mode-light");
-const liveRegion = document.getElementById("liveRegion");
-const searchEl = document.getElementById("search-el");
-const expandEl = document.getElementById("expand-el");
-
-let mode = "light";
-
-toggleModeEl.addEventListener("click", handleModeChange);
-
-
-function handleModeChange() {
-  mode = mode === "dark" ? "light" : "dark";
-  const isDarkMode = mode === "dark";
-  darkModeCss.disabled = !isDarkMode;
-  lightModeCss.disabled = isDarkMode;
-  toggleModeEl.icon = isDarkMode ? "moon" : "brightness";
-  document.body.className = isDarkMode ? "calcite-mode-dark" : "";
-  mapEl.basemap = isDarkMode ? "dark-grey" : "grey";
-
-  document.querySelectorAll(`.calcite-mode-${isDarkMode ? "light" : "dark"}`).forEach(node =>
-    node.classList.replace(`calcite-mode-${isDarkMode ? "light" : "dark"}`, `calcite-mode-${mode}`)
-  );
-}
+require(["esri/Basemap"], (Basemap) => {
+
+  const mapEl = document.getElementById("mapEl");
+
+  // High contrast basemap (dark)
+  const highContrastDarkBasemap = new Basemap({
+    portalItem: {
+      id: "3e23478909194c54992eaaee78b5f754" // Dark
+    },
+    title: "High contrast dark theme",
+    id: "high-contrast-dark"
+  });
+
+  // High contrast basemap (light)
+  const highContrastLightBasemap = new Basemap({
+    portalItem: {
+      id: "084291b0ecad4588b8c8853898d72445" // Light
+    },
+    title: "High contrast (light theme)",
+    id: "high-contrast-light"
+  });
+
+  // Mode
+  let mode = "light";
+  const toggleModeEl = document.getElementById("toggle-mode");
+  const darkModeCss = document.getElementById("jsapi-mode-dark");
+  const lightModeCss = document.getElementById("jsapi-mode-light");
+
+  toggleModeEl.addEventListener("click", handleModeChange);
+
+  function handleModeChange() {
+    mode = mode === "dark" ? "light" : "dark";
+    const isDarkMode = mode === "dark";
+    darkModeCss.disabled = !isDarkMode;
+    lightModeCss.disabled = isDarkMode;
+    toggleModeEl.icon = isDarkMode ? "moon" : "brightness";
+    document.body.className = isDarkMode ? "calcite-mode-dark" : "";
+
+    // If high contrast is enabled, display a high contrast basemap
+    // Else display a gray basemap
+    if (contrastMedia.matches) {
+      mapEl.basemap = isDarkMode ? highContrastDarkBasemap : highContrastLightBasemap;
+    } else {
+      mapEl.basemap = isDarkMode ? "dark-gray-vector" : "gray-vector";
+    }
+  
+    document.querySelectorAll(`.calcite-mode-${isDarkMode ? "light" : "dark"}`).forEach(node =>
+      node.classList.replace(`calcite-mode-${isDarkMode ? "light" : "dark"}`, `calcite-mode-${mode}`)
+    );
+  }
+
+  // High contrast support with basemap and layer effects
+  const contrastMedia = matchMedia("(forced-colors: active)");
+  function checkContrastMedia() {
+    try {
+      if (mode == "dark") {
+        mapEl.basemap = contrastMedia.matches ? highContrastDarkBasemap : "dark-gray-vector";
+        //mapEl.basemap = "dark-gray-vector";
+        contrastMedia.matches ? mapEl.map.layers._items[2].effect = "bloom(1.5, 0.5px, 0.1)" : mapEl.map.layers._items[2].effect = "bloom(0, 0px, 0)";
+      } else {
+        mapEl.basemap = contrastMedia.matches ? highContrastLightBasemap : "gray-vector";
+        //mapEl.basemap = "gray-vector";
+        contrastMedia.matches ? mapEl.map.layers._items[2].effect = "drop-shadow(3px, 1px, 3px)" : mapEl.map.layers._items[2].effect = "drop-shadow(0px, 0px, 0px)";
+      }
+    } catch(err) { }
+  }
+
+  // Event listeners on map load and high contrast media query
+  mapEl.addEventListener("arcgisViewChange", checkContrastMedia);
+  contrastMedia.addListener(checkContrastMedia);
+
+});

demos/high-contrast/index.html

@@ -29,11 +29,12 @@
       <calcite-action-pad layout="horizontal" expand-disabled slot="content-end">
         <calcite-action id="toggle-mode" text="Toggle mode" icon="brightness"></calcite-action>
       </calcite-action-pad>
-
       <calcite-tooltip placement="bottom" reference-element="toggle-mode" slot="content-end">Toggle
         mode</calcite-tooltip>
     </calcite-navigation>
-    <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map>
+    <arcgis-map item-id="5255b3b101594f259ce4326671e8d5c6" id="mapEl" zoom="2">
+      <arcgis-legend legend-style="classic" position="bottom-right"></arcgis-legend>
+    </arcgis-map>
   </calcite-shell>
 
 </body>