No-darkreader NPM

Installation

You could copy the latest minified version from nodarkreader.min.js, also it's available via npm:

npm install no-darkreader

Usage

You only need to setup your index.html file as shown bellow, then it should work properly:

...
<head>
  ...
  <meta name="darkreader" content="NO-DARKREADER-PLUGIN" />
  ...
</head>
...
<script src="./path/to/nodarkreader.min.js"></script>
...

Or if it was installed via npm, you could add this metatag to your index.html:

<meta name="darkreader" content="NO-DARKREADER-PLUGIN" />

also don't forget to import the plugin within your app's entrypoint (e.g. index.js or App.js ):

import 'no-darkreader'

Contributing

note: please run ./minify.sh before submitting any PR!

Pull requests are welcome! For larger changes, especially structural ones, please open an issue first to discuss what you would like to change.

If you have a feature request, feel free to open an issue!

FAQ

How does it work?

Starting from DarkReader/src/inject/dynamic-theme/index.ts file:

function isAnotherDarkReaderInstanceActive() {
    const meta: HTMLMetaElement = document.querySelector('meta[name="darkreader"]');
    if (meta) {
        if (meta.content !== INSTANCE_ID) {
            return true;
        }
        return false;
    }
    createDarkReaderInstanceMarker();
    return false;
}

no-darkreader tricks this function by injecting a fake metatag named darkreader which prevents DarkReader from wokring, also it inverse every css/html modification DarkReader does.

What happends if I didn't use `<meta name="darkreader" content="NO-DARKREADER-PLUGIN" />`?

You may encounter this infinite-loop which causes a performance issue:

1- DarkReader injects a metatag with its instance ID (DarkReader may work before no-darkreader plugin):

// SOURCE: https://github.com/darkreader/darkreader/blob/a08d923f43aaf8b96293491fe0c649c9e0c1edc2/src/inject/dynamic-theme/index.ts
function createDarkReaderInstanceMarker() {
    const metaElement: HTMLMetaElement = document.createElement('meta');
    metaElement.name = 'darkreader';
    metaElement.content = INSTANCE_ID;
    document.head.appendChild(metaElement);
}
function isAnotherDarkReaderInstanceActive() {
    const meta: HTMLMetaElement = document.querySelector('meta[name="darkreader"]');
    if (meta) {
        if (meta.content !== INSTANCE_ID) {
            return true;
        }
        return false;
    }
    createDarkReaderInstanceMarker();  // added if there's no metatag named `darkreader`.
    return false;
}

2- no-darkreader removes DarkReader metatag in order to inject a fake one.

3- DarkReader reinjects a metatag before no-darkreader injecting a fake one.

4- goto step 2.