topic Re: Change the Color of Map Button in ArcGIS JavaScript Maps SDK Questions

Change the Color of Map Button

AlexWie — Wed, 05 Feb 2025 07:08:21 GMT

Good morning, I would like to customize the colors of the standard buttons on the map. However, only part of the buttons are being changed. Does anyone have an idea? Best regards, Alex

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>...</title>  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" /> <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>  <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.31/"></script>  <script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; } calcite-list, /* layer list button */ calcite-button { /* standard button */ --calcite-color-text-1: #bd11a3; /* HOVER */ --calcite-color-text-3: #bd11a3; /* NORMAL */ /* --calcite-color-text-2: #bd11a3; */ /* font layer */ } </style> </head> <body> <arcgis-map item-id="21d542a69db3442f808d92e2618f1390"> <arcgis-home position="top-left" ></arcgis-home> <arcgis-zoom position="top-left" ></arcgis-zoom> <arcgis-expand position="top-right" mode="floating"> <arcgis-search /> </arcgis-expand> <arcgis-expand position="top-right" mode="floating"> <arcgis-layer-list /> </arcgis-expand> <arcgis-expand position="top-right" mode="floating"> <arcgis-legend /> </arcgis-expand> <arcgis-scale-bar position="bottom-left" bar-style="line" unit="metric"></arcgis-scale-bar> </arcgis-map> </body> </html>

Re: Change the Color of Map Button

LittleTurtle — Wed, 05 Feb 2025 14:05:38 GMT

Hello, I think you need to add calcite-action to your list of styled elements

Re: Change the Color of Map Button

AlexWie — Thu, 06 Feb 2025 12:36:20 GMT

Thank you, that worked. However, it's unclear why the buttons need to be addressed differently. The actions only work for the expand button.

calcite-list, calcite-button { --calcite-color-text-3: #7e0b6c; /* NORMAL */ --calcite-color-text-1: #33012a; /* HOVER */ } calcite-action { --calcite-action-text-color: #9E007E; --calcite-action-text-color-pressed: #33012a; }

Re: Change the Color of Map Button

AlexWie — Tue, 11 Feb 2025 06:46:40 GMT

Another question, same topic... I would like to change the color of the button, not the color of the text. It works for the PRESSED and HOVER states, but not for the normal state. Any ideas?

calcite-button { --calcite-color-foreground-1: #9E007E; /* PRESSED */ --calcite-color-foreground-2: #3d9e00; /* HOVER */ --calcite-color-foreground-3: #f3c212; /* NOTHING ??? */ --calcite-color-text-1: #fffdfd; --calcite-color-text-3: #212121; }

Re: Change the Color of Map Button

AlexWie — Tue, 11 Feb 2025 08:37:40 GMT

I have the solution...

.custom-home-widget .esri-widget--button { color: white !important; --calcite-color-foreground-1: #9E007E; /* PRESSED */ --calcite-color-foreground-2: #3d9e00; /* HOVER */ --calcite-color-foreground-3: #f3c212; /* NORMAL */ --calcite-color-text-1: #fffdfd; --calcite-color-text-3: #212121; }

// Home Widget var homeWidget = new Home({ view: view }); view.ui.add(homeWidget, "top-left"); homeWidget.container.classList.add("custom-home-widget");