Skip to content

Instantly share code, notes, and snippets.

@Damperen
Last active January 3, 2024 12:18
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.
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');
});
}
})();
@Korb
Copy link

Korb commented Feb 17, 2021

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

@Damperen
Copy link
Author

Damperen commented Feb 18, 2021

Hello Korb, thank you for your comment.

I am not quite sure how to do that.

Are you trying to install this script?
Then this might help you.
Tampermonkey FAQ102

@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