Skip to content

Instantly share code, notes, and snippets.

@Damperen
Last active May 24, 2024 09:31
Show Gist options
  • Save Damperen/b9a97f7a535f96da3cb5f64220d66ff4 to your computer and use it in GitHub Desktop.
Save Damperen/b9a97f7a535f96da3cb5f64220d66ff4 to your computer and use it in GitHub Desktop.
Obsolete - Messenger.com FINALLY implented a dark mode! Dark mode for messenger.com, the code is already there as you can see. Facebook just haven't gotten around to implementing it in the UI yet..
// ==UserScript==
// @name Native Dark Messenger
// @namespace https://github.com/Damperen
// @version 1.9.5
// @description Almost Native dark mode for Messenger
// @author https://github.com/Damperen
// @match https://www.messenger.com/*
// @grant none
// @run-at document-idle
// @icon https://i.imgur.com/VNn3FEX.png
// ==/UserScript==
(async function() {
'use strict';
var mutationObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutation.addedNodes.forEach(function(node) {
if(node.nodeType === 1){
setDarkModeMultiple(document.querySelectorAll(".__fb-light-mode"));
document.querySelectorAll(".qbubdy2e.pmk7jnqg>svg").forEach(function(svg){
svg.style.fill = "#242526"
});
}
});
});
});
mutationObserver.observe(document.documentElement, {
childList: true,
subtree: true,
});
function setDarkModeMultiple(obj){
if(!document.documentElement.className.contains('__fb-dark-mode')) {
document.documentElement.className = '_9dls __fb-dark-mode';
const sheet = new CSSStyleSheet();
sheet.replaceSync('.a8c37x1j, path{fill: #fff} .__fb-dark-mode{--header-height: 0px} :root{color-scheme: dark} #facebook{ overflow: hidden!important} div, span>a{ color:white!important;} ');
document.adoptedStyleSheets = [sheet];
}
obj.forEach(function(item) {
item.className = item.className.replace('light','dark');
});
}
})();
@Damperen
Copy link
Author

Damperen commented Mar 1, 2021

Tampermonkey 4.11.6120 (5 November 2020), Mozilla Firefox 86.0 (64-bit) - the script is not offered as available for installation.

WELL! I finally figured out how to do this.. Sigh.. I only needed to change the script name from NativeDarkMessenger.js to NativeDarkMessenger.user.js.
I learned something new! Thank you.

@Damperen
Copy link
Author

Damperen commented Mar 2, 2021

Removed the base64 encoded messenger.com favicon image, it was screwing with the search on github, the gist could not be found at all in the search results.

@Korb
Copy link

Korb commented Mar 6, 2021

Possibly fixed the error mentioned in the previous comment.

Now the script installation interface appears, thanks for the fix!
Tampermonkey 4.12.6130, Microsoft Windows 10.0.19042.844

@Damperen
Copy link
Author

Possibly fixed the error mentioned in the previous comment.

Now the script installation interface appears, thanks for the fix!
Tampermonkey 4.12.6130, Microsoft Windows 10.0.19042.844

You're very welcome, thank you for notifying me! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment