Darkreader
Dark Reader Chrome and Firefox extension
Install / Use
/learn @darkreader/DarkreaderREADME
Questions
Most questions can be answered by reading the help page. If the help page doesn't answer your question, open up a new discussion.
How to contribute
Read more about contributing to Dark Reader in CONTRIBUTING.md.
Building for use
Dark Reader build script requires a JavaScript runtime, either NodeJS or Deno. We recommend using NodeJS, Deno support is experimental.
Building with NodeJS
You can install the extension from a file. Install Node.js (we recommend LTS or higher, but any version at or above 15 will work). Download the source code (or check out from git). Open the terminal in the root folder and run:
npm installnpm run buildornpm run build [-- flags]
This will create a build/release/darkreader-chrome.zip file for use in a Chromium-based browser and a build/release/darkreader-firefox.xpi file for use in Firefox.
You can customize the build process by passing flags to build script. To see all flags, run npm run build -- --help.
Building with Deno
You can build Dark Reader with an alternative runtime called Deno. For this run deno:bootstrap script (e.g., via npm run deno:bootstrap or manually copy the command from package.json). Then run the same commands described above.
Please note that if you encounter the error Too many open files (os error 24), then you should use the newer version of Deno (preferably built from source or canary).
Bundling with official Firefox store signatures (experimental)
Before publication, extension stores provide digital signatures for extensions. These digital signatures certify the integrity of the archive (that the extension bundle did not get corrupted or bit-rotted) and that the extension store performed very basic extension validation.
Dark Reader repository contains these digital signatures and you can add them to the extension bundle. The following will build Dark Reader for Firefox version 4.9.63:
npm run build -- --firefox --version=4.9.63
Please note that only Firefox Add-ons store signatures are present in the repository right now. Also, due to NodeJS and TypeScript version compatibility, one might have to first check out the old revision (commit), then build the extension files, then check out the recent commit and create the bundle (by running only signature and zip steps).
Using Dark Reader on a website
You can use Dark Reader to enable dark mode on your website!
- Install the package from NPM (
npm install darkreader) - or build from the source code (
npm run api) - or include the script via a CDN such as unpkg or jsDelivr
Then you can use the following code to control Dark Reader's API:
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});
DarkReader.disable();
// Enable when the system color scheme is dark.
DarkReader.auto({
brightness: 100,
contrast: 90,
sepia: 10
});
// Stop watching for the system color scheme.
DarkReader.auto(false);
// Get the generated CSS of Dark Reader returned as a string.
const CSS = await DarkReader.exportGeneratedCSS();
// Check if Dark Reader is enabled.
const isEnabled = DarkReader.isEnabled();
... or if you are using ES modules:
import {
enable as enableDarkMode,
disable as disableDarkMode,
auto as followSystemColorScheme,
exportGeneratedCSS as collectCSS,
isEnabled as isDarkReaderEnabled
} from 'darkreader';
enableDarkMode({
brightness: 100,
contrast: 90,
sepia: 10,
});
disableDarkMode();
followSystemColorScheme();
const CSS = await collectCSS();
const isEnabled = isDarkReaderEnabled();
Be aware that Dark Reader will add the chrome object onto the window object. These are to stub certain functions that the code will use. They originate from the webextension-api.
Site fixes
Automatically syncing the site fixes for every Dark Reader user was disabled because the GitHub team does not allow using GitHub as a content delivery network (CDN). The storage of these files would be expensive, and making requests to other resources would look suspicious. Each new release of Dark Reader will include the new changes.
However, this can be manually enabled with the following steps:
- Click on the Dark Reader extension icon.
- Click on the
Dev toolsbutton (in the bottom-right corner). - Go to
Advancedand click on thePreview new designbutton. - Close the developer tools window and click on the Dark Reader extension icon again.
- Go to
Settings->Advancedand enable theSynchronize sites fixessetting.
To force a synchronization of the sites fixes (when the corresponding setting is enabled), perform the following steps:
- Click on the Dark Reader extension icon.
- Go to
Settings->Advanced->Dev tools. - For each "Editor" section, click on
Reset changes, confirm withOK, and then click onApply. Afterwards, close the developer tools window and reload the desired page(s).
Enable Dark Reader on restricted pages on Mozilla Firefox
By default, Dark Reader does not work on some websites due to security restrictions enforced by Mozilla.
The following instructions will guide you on how to disable those restrictions.
Proceed with caution. This exposes you to a security risk if you do not know what you are doing.
Be sure that you do not have any suspicious or malicious-looking extension installed before proceeding.
These settings will apply to all extensions, and not just Dark Reader.
Step 1: change Dark Reader's settings.
- Click on the Dark Reader extension icon.
- Click on the
Dev toolsbutton (in the bottom-right corner). - Go to
Advancedand click on thePreview new designbutton. - Close the developer tools window and click on the Dark Reader extension icon again.
- Go to
Settings->Advancedand enable theEnable on restricted pagessetting.
Step 2: change Firefox's settings.
- Type
about:configin the address bar and press Enter.- A warning page may appear. Click
Accept the Risk and Continueto proceed.
- A warning page may appear. Click
- Search for and set
extensions.webextensions.restrictedDomainsto an empty value (if the preference does not exist, create it withStringas the type). - Set
privacy.resistFingerprinting.block_mozAddonManagertotrue(if the preference does not exist, create it withBooleanas the type).
After changing the necessary settings for both Dark Reader and Firefox, reload the desired page(s).
If you had previously changed any of the following preferences, please reset them to their default values as they are only related to security and are not necessary for Dark Reader to work on restricted websites.
To reset them, click on the reset (or delete icon, if present) icon at the most-right corner of the preference line in about:config.
extensions.webextensions.addons-restricted-domains@mozilla.com.disabledextensions.quarantinedDomains.enabledextensions.quarantinedDomains.list
Clarification about quarantined domains ("Run on sites with restrictions" option)
<details><summary>Quarantined domains and Dark Reader — an explanation</summary>The option "Run on sites with restrictions", present for some extensions, is only related to quarantined domains and is not needed for Dark Reader to work on restricted websites. In the context of Firefox's source code, "restricted domains" and "quarantined domains" are two separate things.
The "restricted domains" list (controlled by the preference extensions.webextensions.restrictedDomains) is the same for all users. It will restrict all user-installed extensions (without exceptions) from running on t
