Styling

ArcGIS Maps SDK for JavaScript allow developers to create interactive and visually appealing mapping applications. It provides customized themes for your application, styling components and integration with the Calcite Design System.

Styling the JS API

@arcgis/core and arcgis-map-components can be set to dark or light theme by including a stylesheet.

For AMD modules via ArcGIS CDN, provide the theme name in the CSS path:

1
2
<link rel="stylesheet"
      href="https://js.arcgis.com/4.31/esri/themes/<theme-name>/main.css">

For local builds using @arcgis/core ES modules, use the @import url pattern. The value can be a string or the url(<string>) function, depending on your environment:

styles.css

1
2
3
4
5
/* URL property as a string */
@import "https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/<theme-name>/main.css";

/* URL property using the url() function */
@import url("https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/<theme-name>/main.css");

esri-widget class

The esri-widget class is a base CSS class in the ArcGIS Maps SDK for JavaScript, designed to provide consistent base styles, such as padding, margins and states, across various widgets and components. Applying this class to custom content within maps or UI layouts ensures consistent styling and a unified appearance alongside Esri widgets and components.

1
2
3
4
<arcgis-placement position="bottom-left">
  <arcgis-home></arcgis-home>
  <button class="esri-widget">Placeholder</button>
</arcgis-placement>

View-size CSS classes

CSS classes are applied to the View and updated based on its size. These classes are meant to help target elements inside a view and subsequently style them based on the view's size, regardless of the page size. They work in conjunction with the widthBreakpoint, heightBreakpoint, and orientation properties of both the MapView and SceneView.

1
.esri-view-width-less-than-large .esri-foo

1
2
3
.esri-view-width-xsmall .esri-foo,
.esri-view-width-small .esri-foo,
.esri-view-width-medium .esri-foo

Calcite styling

The SDK has a built-in dependency on the Calcite Design System. Many of the SDK's widgets use Calcite Components which provide CSS variables to override styles, and you can also add your own Calcite components.

Overriding styles

Overriding styles can be accomplished at the global level of your application or by applying the styling to a div or directly to a component. Below is a global CSS styling example that will update all Calcite components and Calcite-based widgets in your app that use calcite-list and calcite-button. Examples of this pattern is available in the LayerList sample.

Global overrides

Apply styles that affect all Calcite components within your application.

1
2
3
4
5
6
7
<style>
  calcite-list, calcite-button {
    --calcite-color-text-1: #3c83b7;
    --calcite-color-text-2: #3c83b7;
    --calcite-color-text-3: #3c83b7;
  }
</style>

Local overrides

Target specific Calcite components for style overrides , in this calcite-panel:

styles.css

1
2
3
4
#infoPanel {
  --calcite-color-brand: #71c96e;
  --calcite-color-brand-hover: #67b564;
}

index.html

1
2
<calcite-panel id="infoPanel">
</calcite-panel>

Theming with variables

You can also use Calcite brand variables to apply your organization's branding colors to an application. Examples of implementing this pattern are in the Color theming for interactive tools sample. For more information, see Calcite's Theming guide.

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  body {
    --calcite-color-brand: #8f4a89;
    --calcite-color-brand-hover: #823b7c;
    --calcite-color-brand-press: #7d3b77;
  }
  body.calcite-mode-dark {
    --calcite-color-brand: #d6b9eb;
    --calcite-color-brand-hover: #c59cd6;
    --calcite-color-brand-press: #b399c4;
  }
</style>

Styling SDK components

Calcite Design System offers dark, light, and auto modes that provide an easy way to adjust the appearance of components like arcgis-coding-components or arcgis-charts components to fit user preferences. The available CSS classes and how to use them are documented in the Calcite modes page. Before styling components, you'll need to use the following code snippet to include the necessary stylesheets from the CDN:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- Calcite Design System -->
<link rel="stylesheet"
      href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />

<!-- ArcGIS Core -->
<link rel="stylesheet"
      href="https://js.arcgis.com/4.31/esri/themes/<theme-name>/main.css">

<!-- Components -->
<link rel="stylesheet"
      href="https://js.arcgis.com/coding-components/4.31/arcgis-coding-components.css"
/>

For projects using ES Modules, import the stylesheets in your CSS file:

1
2
3
4
5
6
7
8
9
10
/* styles.css */

/* Calcite Design System */
@import url("https://js.arcgis.com/calcite-components/2.13.2/calcite.css");

/* ArcGIS Core  */
@import url("https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/<theme-name>/main.css");

/* Components */
@import "https://js.arcgis.com/4.31/arcgis-coding-components.css";

Calcite modes for components

Once the stylesheets are included, apply the desired theme mode to your components by adding the corresponding Calcite mode class.

Dark mode example:

1
<arcgis-arcade-editor class="calcite-mode-dark"></arcgis-arcade-editor>

Light mode example:

1
2
3
<arcgis-charts-pie-chart class="calcite-mode-light" id="pie-chart">
  <!-- Chart Content -->
</arcgis-charts-pie-chart>

Widget styling using Sass (Deprecated)

CSS styles are applied and can be overridden based on a CSS class selector similar to the example snippets below.

styles.css

1
2
3
4
.sassy-theme .esri-widget a {
  background-color: #c69;
  color: #fff;
}

index.html

1
2
3
<body class="sassy-theme">
  <div id="viewDiv"></div>
</body>

Additional information

Please refer to these additional links for further information:

• Sample - Color theming for interactive tools
• Sass