How to enable dark mode in Facebook Messenger?

[vurtomatic]

Does anyone know?

Clicking on the three-dot more menu and selecting preference doesn't give the option. But Facebook Messenger on the web has dark mode.

[zanechua]

Dark mode is only available on facebook.com but not on messenger.com

Currently using this set of custom css that I pulled from one of the chrome extensions (can't remember which one), fixed it after messenger updated the css selectors:

html#facebook{overflow-y:hidden !important}._9dls{--card-background:#121212 !important;--comment-background:rgba(255, 255, 255, 0.1) !important;--disabled-button-background:rgba(255, 255, 255, 0.1) !important;--disabled-icon:rgba(132, 132, 132, 0.6) !important;--disabled-text:rgba(132, 132, 132, 0.6) !important;--divider:rgba(255, 255, 255, 0.17) !important;--filter-disabled-icon:brightness(0) invert(0.3) !important;--filter-placeholder-icon:brightness(0) invert(0.4) !important;--filter-primary-icon:brightness(0) invert(0.4) !important;--filter-secondary-icon:brightness(0) invert(0.4) !important;--hosted-view-selected-state:rgba(255, 255, 255, 0.08) !important;--highlight-bg:rgba(255, 255, 255, 0.1) !important;--hover-overlay:rgba(255, 255, 255, 0.1) !important;--media-inner-border:rgba(255, 255, 255, 0.17) !important;--media-outer-border:#000 !important;--messenger-card-background:#000 !important;--messenger-reply-background:#262626 !important;--overlay-alpha-80:rgba(0, 0, 0, 0.5) !important;--nav-bar-background-gradient:rgba(0, 0, 0, 0) !important;--placeholder-icon:#848484 !important;--placeholder-text:#848484 !important;--popover-background:#121212 !important;--positive-background:#121212 !important;--primary-deemphasized-button-background:rgba(255, 255, 255, 0.1) !important;--primary-deemphasized-button-pressed:rgba(255, 255, 255, 0.08) !important;--primary-deemphasized-button-pressed-overlay:rgba(255, 255, 255, 0.1) !important;--primary-deemphasized-button-text:--accent !important;--primary-icon:#d0d0d0 !important;--primary-text:#d0d0d0 !important;--secondary-button-background:rgba(255, 255, 255, 0.1) !important;--secondary-button-pressed:rgba(255, 255, 255, 0.08) !important;--secondary-button-text:#d0d0d0 !important;--secondary-icon:#848484 !important;--secondary-text:#848484 !important;--shadow-inset:rgba(255, 255, 255, 0.17) !important;--surface-background:#000 !important;--wash:#262626 !important;--web-wash:#121212 !important}._9dls ._1og-, ._9dls .hgaippwi, ._9dls .nwpbqux9{background-color:var(--card-background) !important}._9dls .n1jkxfxr{background-color:var(--secondary-button-background) !important}._9dls path[fill="#000"], ._9dls svg.hwsy1cff, ._9dls svg[fill="#000"]{fill:var(--secondary-text) !important}._9dls .oaz4zybt{box-shadow:none !important}._9dls .sp_Ak9mPwp2uaF_2x.sx_b00c79{filter:var(--filter-secondary-icon) !important}._9dls .bafdgad4{box-shadow:0 1px 0 var(--divider) !important}.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.g5gj957u.rj1gh0hx.buofh1pr.hpfvmrgz.i1fnvgqd.bp9cbjyn.owycx6da.btwxx1t3.dflh9lhu.scb9dxdr.sj5x9vvc.cxgpxx05.sn0e7ne5.f6rbj1fe.l3ldwz01{display:none !important}

You can use it by going to Facebook service, click the wheel, advanced and custom css.

[vurtomatic]

Oh that worked, thank you so much!

I thought I tried injecting custom CSS before but it didn't work, and I'd been injecting custom JS which worked until Facebook changed the CSS.

Do you know which are the selectors Facebook updated?

This is my previous custom JS:

function applycss(css){
 var head = document.getElementsByTagName('head')[0];
 var s = document.createElement('style');
 s.setAttribute('type', 'text/css');
 s.appendChild(document.createTextNode(css));
 head.appendChild(s);
}

applycss(`

:root, .__fb-light-mode {
 --card-background: #1e1e1e;
 --comment-background: #292929;
 --card-background-flat: #292929;
 --disabled-button-background: #373737;
 --divider: #4d4d4d;
 --hosted-view-selected-state: #1D2731;
 --hover-overlay: rgba(255, 255, 255, 0.05);
 --media-inner-border: rgba(255, 255, 255, 0.1);
 --messenger-card-background: #1e1e1e;
 --messenger-reply-background: #2a2a2a;
 --overlay-alpha-80: rgba(41, 41, 41, 0.8);
 --popover-background: #1e1e1e;
 --primary-icon: #cecece;
 --primary-text: #cecece;
 --scroll-thumb: #5d5d5d;
 --secondary-button-background: #353535;
 --secondary-icon: #999;
 --secondary-text: #999;
 --shadow-1: rgba(0, 0, 0, 0.3);
 --shadow-2: rgba(0, 0, 0, 0.4);
 --shadow-5: rgba(0, 0, 0, 0.7);
 --shadow-8: rgba(0, 0, 0, 1);
 --shadow-inset: rgba(000, 000, 000, 0.5);
 --surface-background: #1e1e1e;
 --wash: #373737;
 --web-wash: #1e1e1e;
}

body {
 color: #cecece;
}

/* Delivered icon on left*/
.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.cbu4d94t.pfnyh3mw.d2edcug0.hpfvmrgz.aovydwv3.p8cu3f6v.kb5gq1qc.taijpn5t.b0upgy8r path, .l9j0dhe7.swg4t2nn path, .a8c37x1j.ms05siws.hwsy1cff.b7h9ocf4 path {
 fill: #cecece;
}

path[d="M0 36h36V0H0z"] {
 fill: none !important;
}

/* Icons */
path[d="M18 30c-6.627 0-12-5.372-12-12 0-6.627 5.373-12 12-12 6.628 0 12 5.373 12 12 0 6.628-5.372 12-12 12zm5.294-16.707l-7.296 7.295-3.254-3.252c-.352-.353-.919-.439-1.323-.148a1 1 0 00-.128 1.522l3.998 3.997a1 1 0 001.414 0l8.002-8.001a1 1 0 10-1.413-1.413z"] {
 fill: #999;
}

.sp_o5t_XtHjhxN_1_5x {
 filter: invert(.8);
}

/* App download */
.oajrlxb2.q2y6ezfg.gcieejh5.bn081pho.humdl8nn.izx4hr6d.rq0escxv.nhd2j8a9.j83agx80.p7hjln8o.kvgmc6g5.cxmmr5t8.oygrvhab.hcukyx3x.jb3vyjys.d1544ag0.qt6c0cv9.tw6a2znq.i1ao9s8h.esuyzwwr.f1sip0of.lzcic4wl.l9j0dhe7.abiwlrkh.p8dawk7l.beltcj47.p86d2i9g.aot14ch1.kzx2olss.cbu4d94t.taijpn5t.ni8dbmo4.stjgntxs.k4urcfbm.tv7at329 {
 background: #1e1e1e;
}

.sn0e7ne5 {
 box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 2px;
}

/* Middle header */
.bafdgad4 {
 box-shadow: 0 0 4px rgba(0,0,0,.7)
}

/* Pop-up close icon */
.sp_GOPGoqMu6Pq_1_5x {
 filter: invert(.8);
}

/* Feedback icons */
.sp_BQbKIpOzOAx_1_5x, .sp_a51jIvPl6dA_1_5x {
 filter: invert(.8);
}

/* Reacts */
.tlilfck6 {
 box-shadow: 0 2px 4px var(--shadow-2);
}

/*[[ccb]]*/

::-webkit-scrollbar {
 width: 0 !important;
}

/* messages scrollbar */
div.buofh1pr.j83agx80.eg9m0zos.ni8dbmo4.cbu4d94t.gok29vw1::-webkit-scrollbar {
 width: 0.55em !important;
}
div.buofh1pr.j83agx80.eg9m0zos.ni8dbmo4.cbu4d94t.gok29vw1::-webkit-scrollbar-thumb {
 background: var(--scroll-thumb) !important;
 border-radius: 20px !important;
}

/* emojis */
div._4f4q {
 background: none !important;
}

`);

[wefalltomorrow]

I use this and it works/looks great in Hamsket: https://userstyles.org/styles/193993/facebook-messenger-dark-grey

[vurtomatic]

@wefalltomorrow thank you, that works great too! And that userstyle is from Dec 2020.

I don't understand why both your userstyle link and the one @zanechua shared works but my code didn't.

It was working fine on another machine and it stopped working when I migrated to a new laptop.

[PrimozR]

Any updates on this topic? Automatic dark mode still doesn't work and all the CSS and JS hacks don't fully function either (if they function at all).

Plus a dark mode for the Hamsket UI would also be nice.