dark theme with custom background for facebook messenger
messenger lazy dark (facebook messenger) by 7aint
Details
Author7aint
LicenseMIT License
Categorymessenger.com
Created
Updated
Size17 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Japanese 言語 (日本語): https://github.com/ryryjy/messenger-lazy-dark
Installation
- download and install Stylus addon: https://add0n.com/stylus.html
- click on the 'Install' button above
- click on the install button on new window
Features:
- the style setting can be accessed again by clicking on the stylus icon then click on the gear icon beside the style name
- Colored themes
- Custom background image
- Hide emoji/send button
- Hide facebook sidebar
Custom background:
- you can only apply images that are uploaded within facebook (incl. giphy/tenor) due to Content Security Policy.
- to get the link of a photo uploaded in facebook or messenger, simply view the photo on gallery view mode, then right click on the photo and find the option that lets you copy the image link.
- then place this link into either of the two current available text box in style setting.
- the links will expire after less than a few days because facebook. so you have to do these steps again every time that happens (or never again if you keep your respective browser's cache).
Changelog
24.04.19
- Added color violet and yellow
22.11.29
- crappy support for facebook.com/messages domain
22.11.21
- Added color blue
22.11.16
- Able to hide send/emoji button
22.10.31
- Custom background! [M]
- Colored Themes! [M] | added color pink
22.10.29
- Full black mode (can enable on style settings)
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name messenger lazy dark
@namespace stdio.h
@version 10.5
@description version zucc mode
@author 7aint
@preprocessor stylus
@var checkbox noSendEmojiButt "Hide send/emoji button" 0
@var checkbox noSidebarbloat "Remove messenger.com sidebar bloat" 0
@var select color "Color" {
"Pink": "2",
"Violet": "5",
"Yellow": "4",
"Blue": "3",
"Black": "1",
"Dark": "0"
}
@var checkbox isBG "Custom background" 1
@var text nothing "> Images can only come from photos uploaded in facebook. Example: " ""<fbcdn URL>""
@var text BG1 "- Image URL Main " ""https://media.tenor.com/nr76QwvVCQUAAAAC/dark-flower.gif""
@var text BG2 "- Image URL Navigation " ""https://media.tenor.com/dGd8YKkiFCgAAAAC/dark-flower.gif""
@var text gradientAngleM "- Gradient Angle Main" -108deg
@var text chatBoxSurrBlur "- Chat Box Enclosure Blur" 0.4em
@var color chatBoxSurrBG "- Chat Box Enclosure" #0002
@var color gradientColor1m "- Gradient Main L" #0009
@var color gradientColor2m "- Gradient Main R" #000B
@var color gradientColor1n "- Gradient Navigation L *" #000C
@var color gradientColor2n "- Gradient Navigation R" #000E
@var color listNavBG "- List Navigation BG" #111a
==/UserStyle== */
@-moz-document regexp("http(|s):\\/\\/(|www.)(facebook.com\\/(mess|groupcall)|messenger.com).*") {
.__fb-dark-mode, .__fb-light-mode {
color: var(--primary-text);
--overlay-alpha-80: rgba(11, 11, 11, 0.8);
--secondary-button-text: #E4E6EB;
> div[style$='; width: 360px;'] { // what is wrong with facebook
background-image: linear-gradient(180deg, gradientColor2n, gradientColor1n);
}
}
if noSendEmojiButt == 1 {
div:not([class]) > div > span + div > div[style] > div[id] + div:not([id]) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
div:not([class]) > div > span + div + span {
display:none;
}
}
:root {
color-scheme: dark;
---a00: #111;
---b01: #fffc;
---b02: #fffc;
---c01: #fffa;
---c02: #828282 ;
---d01: #0006;
---d02: #aaa;
---d03: #252527;
---d04: #0b0b0b21;
---d05: #d5d5d50f;
---d06: #f9f9f917;
---d07: #f9f9f936
---e01: #242527;
---e02: #ffffff0a;
---e03: #ffffff08;
---e04: #f7b9287d;
---e05: #363638;
---e06: #ffffff1f;
---e07: #8A8D91;
---e08: #fff4;
---e09: #fff3;
---f01: #212222eb;
---f02: #424242;
---f03: #3e3e3e;
---f04: #fff1;
---f05: #fffa;
---f07: #e6000096;
---g01: #fff1;
---g02: #282829;
---g03: #8686864a;
---g04: #1a1a1a85;
--bg-fg-nonprop: blur(chatBoxSurrBlur);
--chat-enclosure-bg: chatBoxSurrBG;
--poll-vote: #fff7;
--end-call: #e600006e;
if color == 0 {
if isBG == 0 {
--blob-bg: #fff1;
--blob-bg-r: #11111196;
} else {
--blob-bg: #ffffff21;
--blob-bg-r: #ffffff17;
}
--img-icons: invert(.75);
--svg-icons: #fff9;
--scroll-h: #fff4;
}
if color == 1 {
---c01: #fff9;
---c02: #757575;
---d01: #000;
---e01: #000;
if isBG == 1 {
---e03: #ffffff08;
} else {
---e03: #ffffff15;
}
---e05: #202020;
if isBG == 0 {
--blob-bg: #202020;
--blob-bg-r: #20202096;
} else {
--blob-bg: #ffffff0a;
--blob-bg-r: #ffffff03;
}
--img-icons: invert(.50);
--svg-icons: #fff7;
--scroll-h: #fff2;
} if color == 2 {
---c01: #f1b8dab3;
---c02: #f97cc46e;
---d01: #290215ed;
---d02: #a43474;
---d03: #252527;
---d04: #4400286e;
---d05: #1c0013a8;
---d06: #ff72cb17;
---d07: #ff9aec36;
---e01: #2b1c23;
---e02: #ff00bc0a;
---e03: #ff007c0d;
---e04: #f7284442;
---e05: #ff009c0a;
---e06: #00000045;
---e07: #a2558f;
---e08: #6d3d50;
---e09: #ad436d80;
---e12: #a0007a2b;
---e13: #77415f;
---e14: #d33c99;
---f01: #200716eb;
---f02: #55002d;
---f03: #2f1a26;
---f04: #ff007c11;
---f05: #ff85b6aa;
---f07: #ff5900a1;
---g01: #150009d1;
---g02: #380028;
---g03: #ff3ec83b;
---g04: #3800285c;
if isBG == 0 {
--blob-bg: #3c1a2f;
--blob-bg-r: #200b1896;
} else {
--blob-bg: #e050ba21;
--blob-bg-r: #e050ba14;
}
--img-icons: invert(.75) sepia(100%) saturate(75) hue-rotate(-60deg) brightness(0.70);
--svg-icons: var(--accent);
--scroll-h: #c800914f;
--poll-vote: #99003477;
--end-call: #3e000c;
--bg-fg-nonprop: blur(chatBoxSurrBlur);
} if color == 3 {
---c01: #b8c6f1b3;
---c02: #7cbbf99e;
---d01: #010618;
---d02: #3863d9;
---d03: #252627;
---d04: #0016446e;
---d05: #061629d1;
---d06: #72b9ff17;
---d07: #9ad7ff36;
---e01: #1c1d2b;
---e02: #1043b32b;
---e03: #1953ff1a;
---e04: #287bf742;
---e05: #0066ff0a;
---e06: #00000045;
---e07: #3e5c91;
---e08: #3d516d;
---e09: #435fad80;
---e12: #001c5e73;
---e13: #51679e;
---e14: #899ac6;
---f01: #071120eb;
---f02: #001f55;
---f03: #1a202f;
---f04: #07f1;
---f05: #85beffaa;
---f07: #00ffcca1;
---g01: #000915d1;
---g02: #001738;
---g03: #3e8bff3b;
---g04: #0019385c;
if isBG == 0 {
--blob-bg: #20284f;
--blob-bg-r: #111429e6;
} else {
--blob-bg: #507ee021;
--blob-bg-r: #507ee014;
}
--img-icons: invert(.75) sepia(100%) saturate(75) hue-rotate(-150deg) brightness(0.70);
--svg-icons: var(--accent);
--scroll-h: #2150c88c;
--poll-vote: #00479977;
--end-call: #35003e;
--bg-fg-nonprop: blur(chatBoxSurrBlur);
} if color == 4 {
---c01: #EFD8B2B3;
---c02: #f8bb6c6e;
---d01: #251102f2;
---d02: #d57c08;
---d03: #242422;
---d04: #4228006E;
---d05: #1a1501d4;
---d06: #FFE97017;
---d07: #FFDE9936;
---e01: #2b1205;
---e02: #B186102B;
---e03: #F7FF141A;
---e04: #F6D72742;
---e05: #FFE9000A;
---e06: #00000045;
---e07: #8E7E3D;
---e08: #6B643C;
---e09: #AC9C4380;
---e12: #5B540073;
---e13: #97884E;
---e14: #c4b287;
---f01: #1d1306eb;
---f02: #692600;
---f03: #2D2919;
---f04: #ffa60011;
---f05: #ffce84aa;
---f07: #FF2A00A1;
---g01: #141300D1;
---g02: #332B00;
---g03: #FFEE3D3B;
---g04: #3133005C;
if isBG == 0 {
--blob-bg: #42210c;
--blob-bg-r: #1a100a96;
} else {
--blob-bg: #dea74e21;
--blob-bg-r: #dea94e14;
}
--img-icons: invert(.75) sepia(100%) saturate(100) hue-rotate(30deg) brightness(0.70);
--svg-icons: var(--accent);
--scroll-h: #C490218C;
--poll-vote: #998C0077;
--end-call: #3D1100;
--bg-fg-nonprop: blur(chatBoxSurrBlur);
} if color == 5 {
---c01: #c6afeebd;
---c02: #b468f79c;
---d01: #210a44f2;
---d02: #7535cf;
---d03: #212021;
---d04: #16003D6E;
---d05: #0c022be6;
---d06: #976BFF17;
---d07: #B799FF36;
---e01: #251140;
---e02: #5B10AC2B;
---e03: #670FFF1A;
---e04: #990FF542;
---e05: #7B00FF0A;
---e06: #00000045;
---e07: #5C3C8A;
---e08: #563A68;
---e09: #6A41A480;
---e12: #29005673;
---e13: #7F4D92;
---e14: #9D83C2;
---f01: #0F0519EB;
---f02: #8C00B7;
---f03: #23172A;
---f04: #8700FF11;
---f05: #AE7FFFAA;
---f07: #FF2A00A1;
---g01: #09000FD1;
---g02: #180033;
---g03: #6632FF3B;
---g04: #1500335C;
if isBG == 0 {
--blob-bg: #2f1a62;
--blob-bg-r: #1b132796;
} else {
--blob-bg: #8c42db38;
--blob-bg-r: #8446db26;
}
--img-icons: invert(.75) sepia(100%) saturate(100) hue-rotate(-90deg) brightness(0.70);
--svg-icons: var(--accent);
--scroll-h: #701FB78C;
--poll-vote: #5B009977;
--end-call: #3D1100;
--bg-fg-nonprop: blur(chatBoxSurrBlur);
}
}
.__fb-dark-mode, .__fb-light-mode {
--web-wash: var(---a00);
--always-white: var(---b01);
--always-black: var(---b02);
--primary-text: var(---c01);
--secondary-text: var(---c02);
--chat-admin-text-color: var(---c02);
--surface-background: var(---d01);
--accent: var(---d02);
--popover-background: var(---d03);
--divider: var(---d04);
--hosted-view-selected-state: var(---d05);
--hover-overlay: var(---d06);
--pressable-background-color-hover: var(---d06);
--press-overlay: var(---d07);
--scroll-thumb: var(--scroll-h);
--switch-active: var(---f02);
--toggle-active-background: var(---f02) !important;
--circle-button-normal-background-color: var(---d05);
--chat-replied-message-background-color: var(--blob-bg-r);
--messenger-card-background: var(---e01);
--comment-background: var(---e02);
--chat-incoming-message-bubble-background-color: var(--blob-bg) !important;
--chat-outgoing-message-bubble-background-color: var(--blob-bg) !important;
--chat-outgoing-message-background-gradient: var(--blob-bg) !important;
--comment-footer-background: var(---e03);
--base-lemon: var(---e04);
--wash: var(---e07);
--placeholder-icon: var(---e07);
--fds-black-alpha-05: var(---e06);
--placeholder-text: var(---e07);
--disabled-text: var(---e08);
--chat-text-blockquote-color-background-line: var(---e09);
--base-lime: var(---e06);
--background-deemphasized: var(---d05);
--...