Styling

Themes

The following themes are provided out-of-the-box:

  • light
  • dark

The theme name needs to be specified in the CSS path. For AMD modules via ArcGIS CDN:

Use dark colors for code blocksCopy
1
2
<link rel="stylesheet"
      href="https://js.arcgis.com/4.29/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

Use dark colors for code blocksCopy
1
2
3
4
5
/* URL property is a string */
@import "https://js.arcgis.com/4.28/@arcgis/core/assets/esri/themes/<theme-name>/main.css";

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

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 can be accomplished at the global level of your app 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.

Use dark colors for code blocksCopy
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>

Here is another example where you can apply style overrides, in this case to a specified calcite-panel:

styles.css

Use dark colors for code blocksCopy
1
2
3
4
#infoPanel {
  --calcite-color-brand: #71c96e;
  --calcite-color-brand-hover: #67b564;
}

index.html

Use dark colors for code blocksCopy
1
2
<calcite-panel id="infoPanel">
</calcite-panel>

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.

Use dark colors for code blocksCopy
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>

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.

The classes specific for width are provided below. The equivalent is also provided for height, e.g. esri-view-width-xsmall also has an esri-view-height-xsmall class.

xsmall
esri-view-width-xsmall
esri-view-width-less-than-small
esri-view-width-less-than-medium
esri-view-width-less-than-large
esri-view-width-less-than-xlarge
small
esri-view-width-small
esri-view-width-greater-than-xsmall
esri-view-width-less-than-medium
esri-view-width-less-than-large
esri-view-width-less-than-xlarge
medium
esri-view-width-medium
esri-view-width-greater-than-xsmall
esri-view-width-greater-than-xsmall
esri-view-width-less-than-large
esri-view-width-less-than-xlarge
large
esri-view-width-large
esri-view-width-greater-than-xsmall
esri-view-width-greater-than-small
esri-view-width-greater-than-medium
esri-view-width-less-than-xlarge
xlarge
esri-view-width-xlarge
esri-view-width-greater-than-xsmall
esri-view-width-greater-than-small
esri-view-width-greater-than-medium
esri-view-width-greater-than-large

Note that the greater/less than classes are a convenient way to write CSS selectors. For example,

Use dark colors for code blocksCopy
1
.esri-view-width-less-than-large .esri-foo

is more efficient than

Use dark colors for code blocksCopy
1
2
3
.esri-view-width-xsmall .esri-foo,
.esri-view-width-small .esri-foo,
.esri-view-width-medium .esri-foo

The classes specific for page orientation are as follows:

esri-view-orientation-portrait
esri-view-orientation-landscape

Portrait is used when width is less than or equal to height. Otherwise, it is landscape.

For a look at how these various CSS classes work, please see the Responsive apps using CSS sample.

Widget styling using Sass (Deprecated)

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

styles.css

Use dark colors for code blocksCopy
1
2
3
4
.sassy-theme .esri-widget a {
  background-color: #c69;
  color: #fff;
}

index.html

Use dark colors for code blocksCopy
1
2
3
<body class="sassy-theme">
  <div id="viewDiv"></div>
</body>

Additional information

Please refer to these additional links for further information:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.