Messanger - Dark MODE + Tweaks / 5.11.2019

thesunshined

DISCLAIMER
I created this only for my use so... I share this because i can ;d

Viva up 3.jpg

Add https://www.messenger.com/ URL to web panel.
Right click on uper bar and "Show Desktop Version".
Add Stylish (https://userstyles.org) extension to Vivaldi.
In the right up corner click stylish > click three dots and create new style
Paste the code from below:


._4_j5 {display:none}

._2sdm, ._4sp8, ._mh6 _wsc, ._3oh- {font-size:21px;}

body {background-color:black;color:white;}

.__i_, .accessible_elem, ._1nq2, .uiScrollableAreaContent, ._4u-c, ._1wfr, ._9hq, ._4_j4, ._673w _1_fz, ._673w, ._36ic _5l-3, ._2xhi, ._1enh {background-color:#212121;}
span {color:white;}
._hh7, path {background-color:#444;fill:111;}
svg {fill:blue;color:blue;stroke: none);}

@media screen and (max-width:500px) {
    ._1enh {display:none;}
    ._1t2u {border:0px;}
    ._4sp8 {min-width:0px;}
}
._4gd0, ._3oh-, span, ._5i_d, .__6k {color:white;}
._hh7 a {color:white;}
._5swm, ._5swm div, ._5swm div div, ._5swm div div div,  ._tih, ._49ou, ._310t {color:white;}
._1ht6, ._1ht7, ._1ht3, ._1ht3 ._1ht7 {color:red;}
._nd_ ._hh7._6ybn  {background-color:#111;}
._17pz , #cch_f1e3faddc0fd514, ._43by._43by, ._5irm, ._7mkm  {background-color:#212121;}

 ._4rv3 ._5irm,  ._4rv3 ._7mkm {background-color:#212121;}

._6ynn ._2v6o,._5rpb ._1mf,._5rpb ._1mj,
._5rpb ._1mf, ._5rpb ._1mj, ._5rp7 ._1p1v, ._5rp8 ._1p1v
{color:gray;-webkit-text-fill-color:gray;}

._7kpk .navigationFocus, ._7kpk, .uiScrollableAreaContent ul, ._1enh ._6-xk, ._7q1s ._6-xk {background-color:#181818;}

._1t2u {border:0px;}
._39bj li, ._39bj a:nth-child(9)  {display:none;}
._39bj li:nth-child(2), ._39bj li:nth-child(1), ._39bj li:nth-child(4) {display:block;}
._39bj:nth-child(2) {display:none;}

Press "Specify",
In the Applies choose "URLs on the domain" and enter "messenger.com" in the next text field.
On the top left enter a name "Messenger" or something and save it.
Reload the web panel through clicking home icon in the right top of the webpanel or just reset the browser.
.
.

ChangeLOG

v 1.1

Fix for new messanger, that's all.

v 1.0

Bottom bar fixed and GIF, Microphone + Camera icons has been hide cuz i'm not using it.
New colors palette Gray, Dark Gray, Light Gray and some of Red.
"Break's" after resizing window of messanger 700px and 500px, just try it.
And other small fix's

Gaëlle

Genius! Thank you for sharing

thesunshined

Older version: 0.5

JUST RESIZE THE WINDOW

._4_j5 {display:none}
._3_e8, _9hq {width:60px;}
._1enh {min-width:60px;flex-basis:60px;}
._2sdm, ._4sp8, ._mh6 _wsc, ._3oh- {font-size:21px;}

body {background-color:black;color:red;}

.__i_, .accessible_elem, ._1nq2, .uiScrollableAreaContent, ._4u-c, ._1wfr, ._9hq, ._4_j4, ._673w _1_fz, ._673w, ._36ic _5l-3, ._2xhi, ._1enh {background-color:black;}
span {color:white;}
._hh7 {background-color:red;}

@media screen and (max-width:500px) {
    ._1enh {display:none;}
    ._1t2u {border:0px;}
    ._4sp8 {min-width:0px;}
}

Post created for archival purposes

After some time i change few things and fix some "bugs". So there is it, a version 1.0

changelog???

Bottom bar fixed and GIF, Microphone + Camera icons has been hide cuz i'm not using it.
New colors palette Gray, Dark Gray, Light Gray and some of Red.
"Break's" after resizing window of messanger 700px and 500px, just try it.
And other small fix's

Screens

._4_j5 {display:none}

._2sdm, ._4sp8, ._mh6 _wsc, ._3oh- {font-size:21px;}

body {background-color:black;color:white;}

.__i_, .accessible_elem, ._1nq2, .uiScrollableAreaContent, ._4u-c, ._1wfr, ._9hq, ._4_j4, ._673w _1_fz, ._673w, ._36ic _5l-3, ._2xhi, ._1enh {background-color:#212121;}
span {color:white;}
._hh7, path {background-color:#444;fill:111;}
svg {fill:blue;color:blue;stroke: rgb(14, 111, 111);}

@media screen and (max-width:500px) {
    ._1enh {display:none;}
    ._1t2u {border:0px;}
    ._4sp8 {min-width:0px;}
}
._4gd0, ._3oh-, span, ._5i_d, .__6k {color:white;}
._hh7 a {color:white;}
._5swm, ._5swm div, ._5swm div div, ._5swm div div div,  ._tih, ._49ou, ._310t {color:white;}
._1ht6, ._1ht7, ._1ht3, ._1ht3 ._1ht7 {color:red;}
._nd_ ._hh7._6ybn  {background-color:#111;}
._17pz , #cch_f1e3faddc0fd514, ._43by._43by {background-color:#212121;}
._1t2u {border:0px;}
._39bj li, ._39bj a:nth-child(9)  {display:none;}
._39bj li:nth-child(2), ._39bj li:nth-child(1), ._39bj li:nth-child(4) {display:block;}
._39bj:nth-child(2) {display:none;}

thesunshined

v 1.1

ChangeLOG

Fix for new messanger, that's all.


._4_j5 {display:none}

._2sdm, ._4sp8, ._mh6 _wsc, ._3oh- {font-size:21px;}

body {background-color:black;color:white;}

.__i_, .accessible_elem, ._1nq2, .uiScrollableAreaContent, ._4u-c, ._1wfr, ._9hq, ._4_j4, ._673w _1_fz, ._673w, ._36ic _5l-3, ._2xhi, ._1enh {background-color:#212121;}
span {color:white;}
._hh7, path {background-color:#444;fill:111;}
svg {fill:blue;color:blue;stroke: none);}

@media screen and (max-width:500px) {
    ._1enh {display:none;}
    ._1t2u {border:0px;}
    ._4sp8 {min-width:0px;}
}
._4gd0, ._3oh-, span, ._5i_d, .__6k {color:white;}
._hh7 a {color:white;}
._5swm, ._5swm div, ._5swm div div, ._5swm div div div,  ._tih, ._49ou, ._310t {color:white;}
._1ht6, ._1ht7, ._1ht3, ._1ht3 ._1ht7 {color:red;}
._nd_ ._hh7._6ybn  {background-color:#111;}
._17pz , #cch_f1e3faddc0fd514, ._43by._43by, ._5irm, ._7mkm  {background-color:#212121;}

 ._4rv3 ._5irm,  ._4rv3 ._7mkm {background-color:#212121;}

._6ynn ._2v6o,._5rpb ._1mf,._5rpb ._1mj,
._5rpb ._1mf, ._5rpb ._1mj, ._5rp7 ._1p1v, ._5rp8 ._1p1v
{color:gray;-webkit-text-fill-color:gray;}

._7kpk .navigationFocus, ._7kpk, .uiScrollableAreaContent ul, ._1enh ._6-xk, ._7q1s ._6-xk {background-color:#181818;}

._1t2u {border:0px;}
._39bj li, ._39bj a:nth-child(9)  {display:none;}
._39bj li:nth-child(2), ._39bj li:nth-child(1), ._39bj li:nth-child(4) {display:block;}
._39bj:nth-child(2) {display:none;}

azureraver

@thesunshined I think I might've spotted a typo at

svg {fill:blue;color:blue;stroke: none);}

/* bracket mismatch at "none)"? corrected to: */
svg {fill:blue;color:blue;stroke: none;}

I've added on more CSS so things looks better ~~or to me at least haha~~.
But note that I haven't support the styles for other browsers.

(meant for Vivaldi, I didn't use :-ms-input-placeholder for Internet Explorer 10-11 etc...)
Perhaps in the future when I'm less lazy, I'll edit it... but.. this.. is primarily for Vivaldi.

Thanks for sharing your extension!

/* New-message icon to white */
._6-xp svg { filter: invert(1); }

/* Input box's placeholder color override */
input::placeholder { color: gray !important; }
/* New message Input - background color */
._2y8y._6zw0 { background-color: #332f2f; }
/* New message Input - "To:" & input text color */
._2y8z, ._58al._7tpc { color: white; }
/* New message - Context menu, Section Title */
._225b._6ybl { color: rgba(255, 255, 255, 0.34); }
/* New message - Context menu, List Item text color */
._8slc { color: rgb(255, 255, 255); }

/* New chat bubble avatar icon with higher background contrast */
.sp_rl5arIkqEV0.sx_bdc194 { filter: invert(1); }
/* New chat bubble avatar icon's X button to white */
._23ct._6zv9._6zva { filter: invert(1); }

/* Post's Thumbnail with transparency, tinted blue */
._5i_d ._3xn1 { background-color: rgba(128,128,255,0.2); }
/* Post's description, darker blue tint */
._5swm { background-color: rgba(0,0,128,0.2); }

/* More, Reply, React buttons to white */
._1z_2._2u_d._7i2j svg { filter: invert(1); }
/* React (darker-shaded smile with + icon) on message */
.img.sp_WsR73VnpOgJ.sx_609187 { filter: brightness(0.5); }

/* Paint lock icon white */
.sp_DdKEn5uuAgX {
    mix-blend-mode: screen;
	filter: invert(1) brightness(5);
}
/* "Only you can see this" text color */
._74da { color: white; }
/* Target Happy Friendversary text */
._6kxz { color: white; }
/* Line dividers */
._32xu {
    border-top: 1px rgba(255, 255, 255, 0.3) solid;
    border-bottom: 1px rgba(255, 255, 255, 0.3) solid;
}

/* Media panel background color */
._7mkk._7t1o._7t0e { background-color: #332f2f; }
/* Removes the white background circle behind Message Media Toggle button (+) */
._7mki { background-color: rgba(1,1,1,0); }

thesunshined

Nice, i've update it long ago so things might probably change a little ;d
For now i'm using a windows store messenger app with dark mode, ram usage from this app is around 200MB of ram.
Vivaldi with only messenger takes 300-350MB and like to crash browser in left window mode.

But nice update ;d