Esri Theme Toggle

This package automatically switches between the light and dark Esri JS API themes based on the user's browser preference as detected by the prefers-color-scheme media query. It does this by lazily creating link elements for each theme and toggling their disabled property.

Note that this package uses the assetsPath Esri core config value for the path to the CSS files. Any changes to this config need to be done before calling initializeTheme().

Usage

import initializeTheme from '@ugrc/esri-theme-toggle';

initializeTheme();

Using a non-default path to assets:

import esriConfig from '@arcgis/core/config';
import initializeTheme from '@ugrc/esri-theme-toggle';

esriConfig.assetsPath = '/assets';
initializeTheme();

Development

Run npm start and open http://localhost:3000/tests to test this package.