Calcite variables in ArcGIS Instant Apps

The above Active Hurricanes, Cyclones, and Typhoons demo web application was created using the sidebar template. One of the common workflows is to style the sidebar of the application.

Custom CSS

Below are high-level instructions on how to customize the action bar Calcite component of in a sidebar template.

1. Disable Express mode.

2. Click Search settings and enter Custom CSS. You will be navigated to the Theme settings.

3. Click Edit. A Custom CSS window will then be displayed, allowing custom CSS to be added.

4. Add the CSS code below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* Dark theme customization */
.calcite-mode-dark {
    /* Brand colors for primary actions */
    --calcite-ui-brand: #d6b9eb;
    --calcite-ui-brand-hover: #c59cd6;
    --calcite-ui-brand-press: #b399c4;

    /* Background colors for layout */
    --calcite-ui-background: #3e3342;
    --calcite-ui-foreground-1: #2e2933;
    --calcite-ui-foreground-2: #2b262c;
    --calcite-ui-foreground-3: #1b181b;

    /* Status colors for feedback */
    --calcite-ui-info: #be3dc4;
    --calcite-ui-success: #28d258;
    --calcite-ui-warning: #ff9900;
    --calcite-ui-danger: #fe3e7e;
    --calcite-ui-danger-hover: #ff004c;
    --calcite-ui-danger-press: #db005b;

    /* Text colors for content */
    --calcite-ui-text-1: #fef2ff;
    --calcite-ui-text-2: #fef5ff;
    --calcite-ui-text-3: #faf0f9;
    --calcite-ui-text-inverse: #1a0416;
    --calcite-ui-text-link: #872686;

    /* Border colors for separation */
    --calcite-ui-border-1: #373239;
    --calcite-ui-border-2: #413941;
    --calcite-ui-border-3: #463e47;
    --calcite-ui-border-input: #49434c;
}

1. Click Close to run the CSS code.

The Calcite variables above were used to override the .calcite-mode-dark theme of the web application. The override rules were generated in the action bar sample application.

The above Primary Care Providers in Bellingham, WA demo web application was created using the Nearby template. One of the common workflows is to style the nearby results of the application.

Custom CSS

Below is an example of custom CSS that was used to style the nearby results of the application. The CSS code renders every other Calcite block of the nearby results of hospitals in a light gray color.

1. Click Search settings and enter Custom CSS. You will be navigated to the Theme settings.

2. Click Edit. A Custom CSS window will then be displayed, allowing custom CSS to be added.

3. Add the CSS code below:

1
2
3
4
5
6
7
8
9
10
11
12
.feature-group-container:nth-child(even) {

    calcite-block , .esri-feature , calcite-action {
        --calcite-block-header-background-color: #D3D3D3;
        --calcite-block-header-background-color-hover: #D3D3D3;
        --calcite-block-header-background-color-press: #D3D3D3;
        background-color: #D3D3D3;
    }
    calcite-block > nav > calcite-action {
        --calcite-action-background-color:#D3D3D3;
    }
}

This CSS improves the readability of nearby results by creating a zebra-striping effect. It targets even-numbered containers (:nth-child(even)) and applies a light gray background (#D3D3D3) to their components. The styling affects three key elements:

• The Calcite block headers (normal, hover, and pressed states)
• The feature content display area
• The action buttons within the navigation

This pattern helps users distinguish between different results in the list, especially when viewing multiple locations.