Intro

I frequently use Esri’s ArcGIS Developer documentation website, specifically for their ArcGIS API for JavaScript. I prefer to run dark mode whenever possible to reduce eye strain, so jumping from the dark background in my code editor to Esri’s documentation with its white background can be visually jarring.

Here is how I set up a nice looking dark mode for Esri’s documentation using Dark Reader. Dark Reader is a browser extension that will set a dynamic dark mode for any website with better visual results than simple color inverter extensions.

Steps

Installation

Head over to https://darkreader.org to install the extension. Then visit https://developers.arcgis.com/javascript/latest as an example.

Normal ArcGIS JS site
The normal ArcGIS API for JavaScript site with its white background

Edit Dark Reader Config

When you enable Dark Reader, you will see that the page has been darkened but there is a white background obscuring the links on the page.

Default Dark Reader ArcGIS JS site
Dark Reader darkens the page, but links are obscured by a white background

We can edit Dark Reader’s configuration to remove the white background on those links. Specifically, these are CSS text-shadows on anchor elements.

First, click Dark Reader’s Dev tools button to open the Developer Tools dialog. This will show the Dynamic Theme Editor where style overrides can be applied on a site-specific basis. Add this override for the ArcGIS Developers website, then click the Apply button.

================================

developers.arcgis.com

CSS
a {
    text-shadow: none !important;
}
Editing the Dark Reader config
Editing the Dark Reader config
Custom Dark Reader Config
ArcGIS API for JavaScript site after editing Dark Reader config

Wrapping Up

That’s it! Now we have a nice dark mode applied for the ArcGIS Developer docs.

I submitted a pull request for this change at Dark Reader’s GitHub, so in the future hopefully this will just get rolled into the default Dark Reader installation.