initial commit

geospatialem · geospatialem · commit 0882fb8a1e4d · 2025-02-27T16:15:17.000-06:00
diff --git a/demos/high-contrast/app.js b/demos/high-contrast/app.js
@@ -0,0 +1,26 @@
+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}`)
+  );
+}
diff --git a/demos/high-contrast/index.html b/demos/high-contrast/index.html
@@ -0,0 +1,41 @@
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" />
+  <title>2025 Esri Developer & Technology Summit - High contrast</title>
+
+  <!-- Calcite imports -->
+  <script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script>
+
+
+  <!-- ArcGIS Maps SDK for JavaScript imports -->
+  <script src="https://js.arcgis.com/4.32/"></script>
+  <link id="jsapi-mode-light" rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
+  <link disabled id="jsapi-mode-dark" rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/dark/main.css" />
+  <script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script>
+
+  <!-- Demo imports -->
+  <script src="./app.js" defer></script>
+  <link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+  <calcite-shell content-behind>
+    <calcite-navigation slot="header" id="nav">
+      <calcite-navigation-logo href="#" icon="accessibility" alt="Application logo" slot="logo"
+        heading="High contrast"
+        description="Esri Developer & Technology Summit 2025"></calcite-navigation-logo>
+      <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>
+  </calcite-shell>
+
+</body>
+
+</html>
diff --git a/demos/high-contrast/style.css b/demos/high-contrast/style.css
@@ -0,0 +1,24 @@
+/* Esri Developer & Technology Summit Demo Template */
+/* Demo template theming example */
+
+body calcite-navigation-logo{
+  --calcite-color-text-2:#737373;  
+}
+body.calcite-mode-dark calcite-navigation-logo{
+  --calcite-icon-color:#8FD0FF;
+  --calcite-color-text-2:#C7C7C7;
+}
+
+
+html,
+body,
+arcgis-map {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+}
+
+calcite-shell-panel[slot="panel-start"] calcite-panel {
+  border-top: 0;
+}
