colorUtils | References | ArcGIS Maps SDK for JavaScript

import { getBackgroundColor, getBackgroundColorTheme } from "@arcgis/core/views/support/colorUtils.js";

const { getBackgroundColor, getBackgroundColorTheme } = await $arcgis.import("@arcgis/core/views/support/colorUtils.js");

Since: ArcGIS Maps SDK for JavaScript 4.13

Contains utilities for working with colors in the View.

Functions

getBackgroundColor

Function

Returns the average color of the view's background within the view's MapView.extent. The view's background includes the non-reference base layers of the MapView.map's basemap, the background color of the web map (if applicable), and the background color of the view's MapView.container.

Signature: getBackgroundColor (view: MapViewOrSceneView): Promise<Color | null | undefined>

Parameters

Parameter	Type	Description	Required
view	MapViewOrSceneView	The view instance from which to calculate the average color of the background.

Returns: Promise<Color | null | undefined>
Resolves to the average color of the input view's background.

Example

viewColorUtils.getBackgroundColor(view)
  .then(function(averageColor){
    // averageColor is the input view's average background color
  });

getBackgroundColorTheme

Function

This method inspects the basemap and background of a MapView and returns either light or dark as the theme of the background depending on if the average color of the basemap and the view's background is light or dark.

The background theme is determined by taking the average color of the view's background and basemap and determining its brightness based on this algorithm for determining color visibility.

Signature: getBackgroundColorTheme (view: MapViewOrSceneView): Promise<BasemapTheme | null | undefined>

Parameters

Parameter	Type	Description	Required
view	MapViewOrSceneView	The MapView instance from which to get the background color theme.

Returns: Promise<BasemapTheme | null | undefined>
Resolves to a string whose value can be either light or dark.

Example

const backgroundTheme = await viewColorUtils.getBackgroundColorTheme(view);
if(backgroundTheme === "dark"){
  // style other app elements with a dark theme
}