Messenger Dark Mode Enabler

Enable Facebook's native dark mode for Messenger.com

< Feedback on Messenger Dark Mode Enabler

Review: OK - script works, but has bugs

§
Posted: 03. 12. 2021

Unfortunately it no longer works. Facebook broke their own theme.

§
Posted: 04. 01. 2022

The reason it's not working is they forgot to overload `--messenger-card-background: #FFFFFF;` in their dark theme. If you were to add this with proper background colour, it would work.

§
Posted: 04. 01. 2022
Edited: 04. 01. 2022

To be exact, the real reason it's not working is some elements still have __fb-light-mode class therefore light theme property --messenger-card-background: #FFFFFF; overloads the same property of the dark theme. My quick solution:

var sheet = document.createElement('style')
sheet.innerHTML = ":root, .__fb-light-mode { --messenger-card-background: #242526 !important; }";
document.body.appendChild(sheet);

document.querySelector('html').classList.add('__fb-dark-mode');

Please, add some fix to your script. Technically it'll still be a one-liner (with a minor patch on what Facebook fucked up).

§
Posted: 05. 01. 2022

There's an issue with reaction bar as well, so updated version:

// ==UserScript==
// @name         Messenger Dark Mode Enabler
// @namespace    https://greasyfork.org/en/users/717657-crborga
// @version      1.0
// @description  Enable Facebook's native dark mode for Messenger.com
// @author       crborga
// @match        https://*.messenger.com/*
// @grant        none
// ==/UserScript==

var sheet = document.createElement('style')
sheet.innerHTML = ":root, .__fb-light-mode { --messenger-card-background: #242526 !important; } .hybvsw6c { background-color: #242526 !important; }";
document.body.appendChild(sheet);

document.querySelector('html').classList.add('__fb-dark-mode');

Post reply

Sign in to post a reply.