colorUtils

AMD: require(["esri/views/support/colorUtils"], (viewColorUtils) => { /* code goes here */ });
ESM: import * as viewColorUtils from "@arcgis/core/views/support/colorUtils";
Object: esri/views/support/colorUtils
Since: ArcGIS API for JavaScript 4.13

Contains utilities for working with colors in the View.

Method Overview

Name Return Type Summary Object
Promise<Color>more details

Returns the average color of the view's background within the view's extent.

more detailscolorUtils
Promise<string>more details

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.

more detailscolorUtils

Method Details

getBackgroundColor(view){Promise<Color>}

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

Parameter:
view MapView

The MapView instance from which to calculate the average color of the background.

Returns:
Type Description
Promise<Color> 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(view){Promise<string>}

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.

Parameter:
view MapView

The MapView instance from which to get the background color theme.

Returns:
Type Description
Promise<string> Resolves to a string whose value can be either light or dark.
Example:
viewColorUtils.getBackgroundColorTheme(view)
  .then(function(colorTheme){
    if(colorTheme === "dark"){
      // style other app elements with a dark theme
    }
  });

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