Themes
The following themes are provided out-of-the-box:
lightdark
The theme name needs to be specified in the CSS path. For AMD modules via ArcGIS CDN:
<link rel="stylesheet"
href="https://js.arcgis.com/4.30/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( function, depending on your environment:
styles.css
/* URL property is a string */
@import "https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/<theme-name>/main.css";
/* URL property is the url() function */
@import url("https://js.arcgis.com/4.30/@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.
<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
#infoPanel {
--calcite-color-brand: #71c96e;
--calcite-color-brand-hover: #67b564;
}index.html
<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.
<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,
.esri-view-width-less-than-large .esri-foois more efficient than
.esri-view-width-xsmall .esri-foo,
.esri-view-width-small .esri-foo,
.esri-view-width-medium .esri-fooThe 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 overridden based on a CSS class selector similar to the example snippets below.
styles.css
.sassy-theme .esri-widget a {
background-color: #c69;
color: #fff;
}index.html
<body class="sassy-theme">
<div id="viewDiv"></div>
</body>Additional information
Please refer to these additional links for further information: