Change the Color of Map Button

AlexWie · ‎02-04-2025

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>
    <!-- Load Calcite components from CDN -->
    <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>
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.31/"></script>
    <!-- Load Map components from CDN-->
    <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>

LittleTurtle · ‎02-05-2025

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

View solution in original post

AlexWie · ‎02-06-2025

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

View solution in original post

LittleTurtle · ‎02-05-2025

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

AlexWie · ‎02-06-2025

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

AlexWie · ‎02-10-2025

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

AlexWie · ‎02-11-2025

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