NoDarkreader
A plugin to block the Darkreader extension from working on your already dark website!
Installation • Usage • Contributing • FAQ • License
Installation
You could copy the latest minified version from nodarkreader.min.js, also it's available via npm:
npm install no-darkreaderUsage
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.shbefore 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.