How can a website detect if darkreader has changed it to darkmode? #12107
IanButterworth
started this conversation in
General
Replies: 1 comment
-
I found a rough way in javascript with: var targetNode = document.documentElement;
var config = { attributes: true, childList: false, subtree: false };
var darkreader_field = 'data-darkreader-scheme';
function check_scheme() {
if (targetNode.getAttribute(darkreader_field) == 'dark') {
console.log("darkreader dark mode detected");
} else {
console.log("darkreader non-dark mode detected");
}
}
// Callback function to execute when mutations are observed
var callback = function (mutationsList, observer) {
for (var mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === darkreader_field) {
check_scheme();
}
}
};
document.addEventListener("DOMContentLoaded", function () {
check_scheme(); // necessary to detect first darkreader change on page load
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);
}); |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I want to set up my web site to change an image if darkreader is on on the page.
What's the recommended way to detect whether darkreader has changed the page?
Beta Was this translation helpful? Give feedback.
All reactions