nd

no-darkreader

A plugin to block the Darkreader extension from working on your already dark website!

Showing:

Popularity

Downloads/wk

4

GitHub Stars

7

Maintenance

Last Commit

2mos ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme


NoDarkreader

A plugin to block the Darkreader extension from working on your already dark website!

npm GitHub DeepScan grade GitHub file size in bytes

InstallationUsageContributingFAQLicense

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.

License

This project is licensed under an MIT license.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100