Skip to content

Instantly share code, notes, and snippets.

@mark-szabo

mark-szabo/messenger-dark-mode.user.js

Last active July 2, 2020 19:28
Show Gist options
  • Save mark-szabo/7bfd322575686ed4b09c810bd2fd03b2 to your computer and use it in GitHub Desktop.
Save mark-szabo/7bfd322575686ed4b09c810bd2fd03b2 to your computer and use it in GitHub Desktop.
Download ZIP
Messenger material design dark mode
Raw
messenger-dark-mode.user.js
// ==UserScript==
// @name Messenger dark theme
// @namespace http://tampermonkey.net/
// @version 1.0.7
// @updateURL https://gist.github.com/mark-szabo/7bfd322575686ed4b09c810bd2fd03b2/raw/messenger-dark-mode.user.js
// @downloadURL https://gist.github.com/mark-szabo/7bfd322575686ed4b09c810bd2fd03b2/raw/messenger-dark-mode.user.js
// @description Messenger dark theme
// @author mark-szabo (forked from bibixx)
// @match https://www.messenger.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const svgNoFill = `<path d="M279.135 512c78.756 0 150.982-35.804 198.844-94.775 28.27-34.831-2.558-85.722-46.249-77.401-82.348 15.683-158.272-47.268-158.272-130.792 0-48.424 26.06-92.292 67.434-115.836 38.745-22.05 28.999-80.788-15.022-88.919A257.936 257.936 0 0 0 279.135 0c-141.36 0-256 114.575-256 256 0 141.36 114.576 256 256 256zm0-464c12.985 0 25.689 1.201 38.016 3.478-54.76 31.163-91.693 90.042-91.693 157.554 0 113.848 103.641 199.2 215.252 177.944C402.574 433.964 344.366 464 279.135 464c-114.875 0-208-93.125-208-208s93.125-208 208-208z"/>`;
const svgFill = `<path xmlns="http://www.w3.org/2000/svg" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"/>`
let isDark = false;
let a = null;
let moonA = {};
const link = document.createElement("link");
link.setAttribute("type", "text/css");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", "https://gistcdn.githack.com/mark-szabo/7bfd322575686ed4b09c810bd2fd03b2/raw/cc93167aafb3f86983944561844967a9abaffa74/theme.css");
const changeSVG = () => {
if (isDark) {
moonA.innerHTML = `
<svg style="height: 100%; transform: scale(0.6);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">${svgFill}</svg>
`
} else {
moonA.innerHTML = `
<svg style="height: 100%; transform: scale(0.6);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">${svgNoFill}</svg>
`
}
}
const enableDark = () => {
isDark = true;
document.head.appendChild(link);
changeSVG();
};
const disableDark = () => {
isDark = false;
link.remove();
changeSVG();
}
const setDarkByTime = () => {
const h = new Date().getHours();
if ( h < 5 || h > 20 ) {
enableDark();
} else {
disableDark();
}
const t1 = new Date();
const t2 = new Date();
t2.setHours(t2.getHours() + 1);
t2.setMinutes(0);
t2.setSeconds(0);
t2.setMilliseconds(0);
console.log(t2);
setTimeout(setDarkByTime, t2.getTime() - t1.getTime(), t2);
}
const fn = () => {
const banner = document.querySelector("div._6-xk");
if ( !banner ) {
return;
}
const fc = banner.querySelector("div._6ymu._7iq4");
const newFc = fc.cloneNode(true);
moonA = newFc.querySelector("a");
changeSVG();
const svg = moonA.querySelector("svg");
svg.style.height = "100%";
svg.style.transform = "scale(0.6)";
svg.style.fill = "#398dff";
moonA.style.background = "none";
moonA.style.opacity = 1;
moonA.title = isDark ? "Turn dark mode off" : "Turn dark mode on";
banner.insertBefore(newFc, fc);
moonA.addEventListener("click", (e) => {
e.preventDefault();
if ( isDark ) {
disableDark();
} else {
enableDark();
}
});
document.body.removeEventListener("mousemove", fn);
}
enableDark();
document.body.addEventListener("mousemove", fn);
// If you want to enable/disable dark mode by the time of day, uncomment this line.
// setDarkByTime();
})();
Raw
theme.css
:root {
--dark-bg: #121212;
--surface1-bg: rgba(255,255,255,.05);
--surface2-bg: rgba(255,255,255,.07);
--surface3-bg: rgba(255,255,255,.08);
--surface4-bg: rgba(255,255,255,.09);
--surface5-bg: rgba(255,255,255,.11);
--surface6-bg: rgba(255,255,255,.12);
--surface7-bg: rgba(255,255,255,.14);
--surface8-bg: rgba(255,255,255,.15);
--surface9-bg: rgba(255,255,255,.16);
--surface9-bg-abs: #383838;
--primary-bg: #0084FF;
--text: #FFFFFF;
--text-light: rgba(255,255,255,.87);
--text-light2: rgba(255,255,255,.60);
--text-disabled: rgba(255,255,255,.38);
}
body {
background: var(--dark-bg);
color: var(--text);
}
/* SVG icons */
path, path#Fill-1, path#Fill-2 {
fill: var(--text)!important;
stroke: none!important;
}
/* Icon button backgrounds */
._6ymu, ._6-xp, ._6ybv, ._6y56, ._6ybz, ._7hu0, ._7hu1, ._7hty {
background-color: var(--surface2-bg)!important;
}
/* Scroller */
.uiScrollableAreaGripper {
background-color: var(--surface2-bg)!important;
border: none!important;
border-radius: 7px!important;
width: 7px!important;
}
.contentAfter .uiScrollableAreaTrack:hover, .contentBefore .uiScrollableAreaTrack:hover, .contentAfter.uiScrollableAreaTrackOver .uiScrollableAreaTrack, .contentBefore.uiScrollableAreaTrackOver .uiScrollableAreaTrack, .uiScrollableAreaDragging .uiScrollableAreaTrack {
background-color: var(--surface1-bg)!important;
}
/* Full background */
._4sp8 {
background-color: var(--dark-bg)!important;
}
/* Text */
._8slc {
color: var(--text)!important;
}
/* Header */
._673w {
background: var(--surface1-bg)!important;
border-bottom: 0px!important;
box-shadow: 0 6px 3px -3px rgba(0,0,0,.16),0 6px 3px -3px rgba(0,0,0,.23)!important;
}
/* Messenger header (top left) */
._6-xk {
border-bottom: 0px!important;
background: var(--surface1-bg)!important;
box-shadow: 0 6px 3px -3px rgba(0,0,0,.16),0 6px 3px -3px rgba(0,0,0,.23)!important;
}
._6-xo {
color: var(--text)!important;
}
/* Error message below the Messenger header */
._p0g {
margin: 14px 14px 0 8px!important;
border-radius: 8px!important;
box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)!important;
}
/* Left menu item */
._1ht1 {
background: var(--surface1-bg)!important;
margin: 8px 14px 8px 8px!important;
border-radius: 8px!important;
box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)!important;
}
/* Left menu item inner padding */
._2il3 {
padding-left: 0!important;
padding-right: 0!important;
}
/* Left menu item (active) */
._1ht1._1ht2 {
background-color: var(--surface4-bg)!important;
}
/* Left menu item (hover) */
._1ht1:hover {
color: #fff !important;
background-color: var(--surface3-bg)!important;
}
/* Left menu item: profile pic */
._1ht1 ._1qt3._6-5k ._87u_ {
height: 50px!important;
}
/* Left menu item: group profile pic */
._7q0v, ._7q1i, ric, ._4mnq {
border: 2px solid var(--surface9-bg-abs)!important;
}
/* Left menu search bar */
._5iwm {
padding: 14px 14px 6px 8px!important;
}
._5iwm ._58al {
background-color: var(--surface3-bg)!important;
color: var(--text)!important;
height: 40px!important;
box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)!important;
}
._5iwm ._58ak::before {
left: 13px;
top: 15px;
}
._5iwm ._58al::placeholder {
color: var(--text)!important;
}
._5iwm._6-_b~._2xme {
top: 25px!important;
}
/* Right menu */
._4_j5 {
border-left: 0px!important;
}
/* Right menu: info button */
._6yms > svg > g > g > path {
fill: #0099ff!important;
stroke: none!important;
}
/* Right menu: name card */
._3eur._6ybk a {
color: var(--text)!important;
}
/* Right menu items */
._1lix {
background: var(--surface1-bg)!important;
margin: 8px!important;
border-radius: 8px!important;
box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)!important;
}
/* Right menu profile item */
._1jt6 {
background: var(--surface1-bg)!important;
margin: 0 8px 14px 8px!important;
border-radius: 8px!important;
box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)!important;
padding: 14px!important;
}
._7q1q, ._4q61 {
color: var(--text)!important;
}
._80cm {
background: var(--surface9-bg-abs)!important;
}
._80co {
background: none!important;
}
._7q1p, ._7q1m, ._7q1n, ._7q1l {
border: 4px solid var(--surface9-bg-abs)!important;
}
._71b- ._2t_ {
color: var(--text-light2)!important;
}
/* Right menu: Shared Files */
._fy2 {
color: var(--text)!important;
}
/* Right menu: Shared Photos */
._3m31:nth-of-type(3n+1) {
border-right: 2px solid var(--surface1-bg)!important;
}
._3m31:nth-of-type(3n+2) {
border-left: 1px solid var(--surface1-bg)!important;
border-right: 1px solid var(--surface1-bg)!important;
}
._3m31:nth-of-type(3n+3) {
border-left: 2px solid var(--surface1-bg)!important;
}
._7jxv {
background: rgba(255, 255, 255, 0)!important;
}
/* Type new message... */
._4rv3 {
margin: 0 6px 8px 0!important;
}
._5irm._7mkm {
background: var(--surface9-bg-abs)!important;
background-color: var(--surface9-bg-abs)!important;
border-radius: 8px!important;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;
}
._kmc {
overflow: hidden!important;
}
._kmc._7kpg ._1p1t {
color: var(--text)!important;
-webkit-text-fill-color: var(--text)!important;
}
._7kpk {
background-color: var(--surface1-bg)!important;
}
._7mki {
background-color: rgba(255, 255, 255, 0)!important;
}
._7t0j {
transform: translateY(0%)!important;
}
._7t0e {
transform: translateY(-120%)!important;
}
._7t1o {
width: auto!important;
background-color: var(--surface9-bg-abs)!important;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px !important;
border-radius: 8px !important;
}
/* Replying to */
._67tu {
background-color: var(--surface2-bg)!important;
border-radius: 8px!important;
}
._3egs {
background: none!important;
}
/* Emoji popup */
._1uwz {
background: var(--surface7-bg)!important;
}
/* Bottom margin below 'Type a message...' box */
._1wfr {
margin-top: -8px!important;
}
/* Message attachments */
._2a-p {
overflow: hidden!important;
}
._2zl5 {
background: var(--surface2-bg)!important;
}
._2-x5 {
background-color: transparent!important;
}
/* Chat bubble */
._hh7 {
background-color: var(--surface1-bg);
color: var(--text)!important;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;
}
/* Chat bubble (left) */
._29_7 ._52mr, ._29_7 ._52mr:active, ._7301._hh7, ._7301._hh7._hh7._6ybn, ._29_7._3erg ._3058._s1-._4k7c._4k7c {
background-color: var(--surface1-bg)!important;
}
/* Chat bubble (right) */
._43by {
box-shadow: 0 3px 6px rgba(0,132,255,0.16), 0 3px 6px rgba(0,132,255,0.23)!important;
}
/* Chat bubble (right, reply with image) */
._nd_ ._3058._s1-._6e6n, ._3erg ._4k7c, ._3erg ._2saq {
border-color: transparent!important;
}
._nd_ ._3058._s1-._4k7c:hover, ._nd_ ._3058._s1-._2saq:hover, ._29_7 ._3058._s1-._4k7c:hover, ._29_7 ._3058._s1-._2saq:hover, ._3erg ._2saq:hover, ._3erg ._4k7c:hover {
background-color: var(--primary-bg)!important;
}
._nd_ ._3058._s1-._4k7c:active, ._nd_ ._3058._s1-._2saq:active, ._29_7 ._3058._s1-._4k7c:active, ._29_7 ._3058._s1-._2saq:active, ._3erg ._4k7c:active, ._3erg ._2saq:active {
background-color: var(--primary-bg)!important;
}
/* Chat bubble (emoji only) */
._hh7._6ybn._2f5r, ._hh7._6ybn:active._2f5r, ._-5k ._hh7._6ybn._2f5r, ._6q1a ._hh7._6ybn._2f5r, ._6q1a ._hh7._6ybn:active._2f5r, ._6q1a ._-5k ._hh7._6ybn._2f5r {
background: none!important;
background-color: transparent!important;
box-shadow: none!important;
}
/* Profile pic next to chat bubble on the left */
._4ld- {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;
}
/* Status icon next to chat bubble on the right */
._8r4c > svg > g > path:nth-of-type(1) {
fill: transparent!important;
stroke: none!important;
}
._8r4c > svg > g > path:nth-of-type(2) {
fill: rgba(134, 142, 153, 0.5)!important;
stroke: none!important;
}
/* React button */
._aou {
background: #121212 !important;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;
}
/* Card chat bubbles (images, links with previews, etc.) */
._52mr._2poz {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;
}
/* Like emoji */
._3058._15gf > div > div > svg > rect {
fill: var(--dark-bg);
}
._3058._15gf > div > div > svg > mask > path {
fill: black!important;
}
/* Contact selection chips */
._14-8 {
background: var(--surface2-bg)!important;
}
._14-8:focus {
background: var(--surface6-bg)!important;
}
/* Contact selection popup */
._5f0v._2y8_ {
background-color: var(--dark-bg)!important;
}
._4g0h {
color: var(--text)!important;
}
i._2xme {
filter: invert(100%);
}
/* x unread messages */
._4wzs {
background-color: rgb(32, 32, 32)!important;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;
margin-top: 8px!important;
color: var(--text)!important;
}
/* Reminder header */
._3nta {
border-bottom: none!important;
background: var(--surface9-bg-abs)!important;
background-color: var(--surface9-bg-abs)!important;
border-radius: 8px!important;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;
margin-top: 14px!important;
}
/* Reminder header date line */
._2mjl {
color: var(--text-light2)!important;
}
/* Reminder */
._3wb1 {
border: 1px solid transparent!important;
margin: 14px auto!important;
background-color: var(--surface1-bg)!important;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;
color: var(--text)!important;
}
._3wa-, ._3wb0 {
color: var(--text)!important;
}
._3war, ._3wax {
border-top: 1px solid var(--surface3-bg)!important;
}
/* Poll */
._3b4t {
border: none!important;
margin: 14px auto!important;
background-color: var(--surface1-bg)!important;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;
}
._3b4h {
background-color: var(--surface5-bg)!important;
}
._34n6 {
background-color: inherit!important;
color: inherit!important;
}
/* Poll title */
._3b4u {
color: var(--text-light2)!important;
}
/* Floating 'Report a bug' button */
._4_xe {
display: none!important;
}
/* Hide scrollbar on body */
._z4_ {
overflow: hidden;
}
/* TODO: documentation */
._1ht6, ._36ic ._1tqi, ._364g, ._225b, ._3q34, ._3q35, time._3oh-, ._3szq, ._1lj0, ._3eus, ._17w2, ._2v6o, ._5rpu[contenteditable="true"] [data-text="true"], ._5rh4, ._5qsj, ._19jt, ._58al, ._58al::placeholder, ._7ht_ {
color: rgba(255, 255, 255, 0.88) !important;
}
._3eus, ._2v6o, ._1ht7, ._ih3 {
color: rgba(255, 255, 255, 0.5) !important;
}
._4dfu {
display: none !important;
}
._4ik4, .__6m, ._hh7 a, ._497p, ._4rpj {
color: #fff !important;
}
._4rv6, ._4ce_, .sp_-dCYIpyXIre_2x, ._uwa {
filter: invert(100%) !important;
}
._4rv6, ._4ce_ {
opacity: 0.7 !important;
}
/* Surface borders */
._4rv3, ._1t2u, ._4_j5, ._673w, ._1li-, ._2i-c ._54nf ._54ak, ._4ea2, ._374b {
border: 0px!important;
}
._4_j4 .chatAttachmentShelf {
border: 0 !important;
}
a {
color: #4986ff !important;
}
._558b ._54ng {
background-color: #000 !important;
}
._558b ._54ng *, ._4ebz, ._2jnv, ._2jnx, ._2jnz, ._2jnx ._30e7 ._5j5f, ._374c {
color: #fff !important;
}
._33p7 {
background: rgba(18, 18, 18, 0.95) !important;
}
._59s7 {
background: none !important;
}
._4eby {
background: rgba(18, 18, 18, 0.95) !important;
color: #fff !important;
}
._4jgp ._4jgu, ._59s7 ._4eby {
background: #1E1E1E !important;
}
._53io {
background-image: url(https://static.xx.fbcdn.net/rsrc.php/v3/yy/r/w79rwsQ84E3.png) !important;
background-repeat: no-repeat !important;
background-size: auto !important;
background-position: 0px -339px !important;
height: 12px !important;
width: 12px !important;
transform: rotate(180deg) !important;
}
._hw2 ._53ik ._53io {
transform: rotate(0deg) !important;
}
._8i1 {
background: #121212 !important;
}
._13iv ._5l37:active, ._13iv ._1k1p, ._13iv ._5l37:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
}
._4_j4 .chatAttachmentShelf {
background-color: #121212 !important;
}
.__6k, .__6l {
color: rgba(255, 255, 255, 0.88) !important;
}
.fbNubFlyoutAttachments {
border: 0 !important;
}
._1ht3 ._1htf {
color: rgba(255, 255, 255, 0.88) !important;
}
._4eb- * {
color: #fff !important;
}
._36zg {
color: rgba(255, 255, 255, 1) !important;
}
._1n-e {
color: rgba(255, 255, 255, .40) !important;
}
._4gd0 {
background: #121212 !important;
}
._5l37:active, ._1k1p {
background-color: rgba(255, 255, 255, .05) !important;
}
._5l37:hover {
background-color: rgba(255, 255, 255, .05) !important;
}
._6cs7 {
color: rgba(255, 255, 255, .60) !important;
}
._4ng2 {
color: rgba(255, 255, 255, 1) !important;
}
._4k7a {
color: rgba(255, 255, 255, .5) !important;
}
._4kf5 {
background: #121212 !important;
}
._44ju ._44jz {
color: rgba(255, 255, 255, 1) !important;
}
._4owc ._53ij {
box-shadow: 0 2px 4px 1px rgba(255, 255, 255, .1) !important;
}
._53ij {
background: #1e1e1e !important;
}
._67tw {
color: rgba(255, 255, 255, .5) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment