no-darkreader

    1.0.1 • Public • Published


    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.

    Install

    npm i no-darkreader

    DownloadsWeekly Downloads

    9

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    6.85 kB

    Total Files

    4

    Last publish

    Collaborators

    • hadialqattan