Skip to content
This repository has been archived by the owner on Sep 7, 2022. It is now read-only.
/ no-darkreader Public archive

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

License

Notifications You must be signed in to change notification settings

hadialqattan/no-darkreader

Repository files navigation

THIS PLUGIN HAS BEEN DEPRECATED SINCE THE EXISTANCE OF <meta name="darkreader-lock"> META-TAG WHICH SERVES THE SAME PURPOSE OF THIS PLUGIN!

THIS REPO HAS BEEN ARCHIVED.


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.

Credits

Thanks to Kainoa Kanter (@ThatOneCalculator) for the awesome logo.

License

This project is licensed under an MIT license.