demos/BasemapColor.html

<!--
    Codepen sample: https://codepen.io/kellyhutchins/pen/KKxmNJQ
-->

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Basemap Theme
    </title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />

    <script src="https://js.arcgis.com/4.26/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/Graphic",
            "esri/widgets/BasemapToggle",
            "esri/core/reactiveUtils",
            "esri/core/promiseUtils",
            "esri/views/support/colorUtils",
            "esri/views/MapView",
            "esri/widgets/Locate",
            "esri/symbols/SimpleMarkerSymbol"
        ], (Map, Graphic, BasemapToggle, reactiveUtils, promiseUtils, colorUtils, MapView, Locate, SimpleMarkerSymbol) => {
            let hasLocation = false;
            const lightColor = "#7A003C";
            const darkColor = "#fff";
            const textSymbol = {
                type: "text",
                color: "#7A003C",
                text: "\ue61d", // esri-icon-map-pin
                font: {
                    size: 36,
                    family: "CalciteWebCoreIcons" // Esri Icon Font
                }
            }
            const map = new Map({
                basemap: "gray-vector"
            });

            const view = new MapView({
                center: [-97.63, 38.34],
                container: "viewDiv",
                map,
                zoom: 3
            });

            const locate = new Locate({
                view,
                graphic: new Graphic({ symbol: textSymbol })
            });
            locate.on("locate", () => {
                hasLocation = true;
            })

            view.ui.add(locate, "top-left");
            const basemapToggle = new BasemapToggle({
                view,
                nextBasemap: "dark-gray"
            })
            view.ui.add(basemapToggle, "bottom-right");

            let abortController = null;

            const basemapHandle = reactiveUtils.watch(
                () => view.map.basemap,
                () => onBasemapChange(),
                { initial: true }
            );

            // Remove watch handle when view is destroyed
            view.addHandles(basemapHandle);

            async function onBasemapChange() {
                abortController?.abort();
                const { signal } = (abortController = new AbortController());

                await reactiveUtils.whenOnce(() => !view.updating, signal);

                // getBackgroundColor is also available
                const backgroundTheme = await colorUtils.getBackgroundColorTheme(view);
                const color = backgroundTheme === "light" ? lightColor : darkColor;

                locate.graphic.symbol.color = color;
                if (hasLocation) {
                // We already have a graphic. Let's recreate
                view.graphics.removeAll();
                locate.locate();
                }
            }
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>