Improved Dark Mode for Messenger.
Messenger Dark Mode by ninjaaaaah
Details
Authorninjaaaaah
LicenseNo License
Categorymessenger.com
Created
Updated
Size17 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.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 Dark
@description A dark theme for Facebook Messenger.
@author reizumi
@namespace codeberg.org/reizumi/MessengerDark
@homepageURL https://codeberg.org/reizumi/MessengerDark
@supportURL https://codeberg.org/reizumi/MessengerDark/issues
@preprocessor stylus
@version 1.2.8
@license CC-BY-SA-4.0
@var select theme "Preset color theme" {
"Dark*" : "dark",
"Darker" : "darker",
"Gruvbox-Soft" : "gruvbox-s",
"Gruvbox-Medium" : "gruvbox-m",
"Gruvbox-Hard" : "gruvbox-h",
"Nord" : "nord",
"Discord" : "discord",
"Mastodon" : "mastodon",
"Moonlight" : "moonlight",
"Proton" : "proton",
"Breeze" : "breeze",
"Adwaita" : "adwaita",
"Fuchsia" : "fuchsia-dark",
"Custom" : "custom",
}
@var text fontName "Custom font" default
@var checkbox colorScrollbars "Theme scrollbars" 1
@var checkbox colorConvos "Theme conversation colors" 0
@var checkbox colorSelect "Theme text selection" 0
@var color bg-mt "Message search match color" #f7b928
@var color bg-ac "Selected chat color" rgba(255, 255, 255, .06)
@var color bg-1 "Custom Background 1" #222
@var color bg-2 "Custom Background 2" #2b2b2b
@var color bg-3 "Custom Background 3" #333
@var color fg-1 "Custom Foreground 1" #fff
@var color fg-2 "Custom Foreground 2" #aaa
@var color ic-1 "Custom icon color" #aaa
@var color ac-1 "Custom accent color" #09f
@var color bg-bb "Custom sender bubble color" #07b
@var text ic-2 "Custom icon filter" invert(79%) sepia(2%) saturate(19%) hue-rotate(325deg) brightness(89%) contrast(81%)
@var text ac-2 "Custom accent filter" invert(50%) sepia(94%) saturate(3979%) hue-rotate(183deg) brightness(104%) contrast(103%)
@var checkbox darkButtonText "Custom: Dark button text" 0
==/UserStyle== */
/*
Some icons require CSS filters due to them using images instead of vectors. (eg. three-dot menu, arrows, and payment icons)
To make or generate your own CSS filter, you can use any tool that converts color values to CSS filter.
Convert ic-1 (icon) and ac-1 (accent color) color values for consistency, or do whatever you want.
*/
@-moz-document domain("messenger.com") {
:root,
.__fb-light-mode,
.__fb-dark-mode {
if theme == dark {
--bg-1: #222;
--bg-2: #2b2b2b;
--bg-3: #333;
--fg-1: #fff;
--fg-2: #aaa;
--ic-1: #888;
--ac-1: #09f;
--bg-bb: #07b;
--ic-2: invert(79%) sepia(2%) saturate(19%) hue-rotate(325deg) brightness(89%) contrast(81%);
--ac-2: invert(50%) sepia(94%) saturate(3979%) hue-rotate(183deg) brightness(104%) contrast(103%);
} else if theme == darker {
--bg-1: #111;
--bg-2: #1b1b1b;
--bg-3: #222;
--fg-1: #eee;
--fg-2: #999;
--ic-1: #999;
--ac-1: #06c;
--bg-bb: #048;
--ic-2: invert(72%) sepia(0%) saturate(6%) hue-rotate(251deg) brightness(86%) contrast(82%);
--ac-2: invert(24%) sepia(95%) saturate(1745%) hue-rotate(195deg) brightness(96%) contrast(104%);
} else if theme == gruvbox-s {
--bg-1: #32302f;
--bg-2: #504945;
--bg-3: #3c3836;
--fg-1: #ebdbb2;
--fg-2: #a89984;
--ic-1: #a89984;
--ac-1: #83a598;
--bg-bb: #076678;
--ic-2: invert(67%) sepia(5%) saturate(1223%) hue-rotate(356deg) brightness(91%) contrast(91%);
--ac-2: invert(77%) sepia(3%) saturate(1992%) hue-rotate(105deg) brightness(82%) contrast(87%);
} else if theme == gruvbox-m {
--bg-1: #282828;
--bg-2: #3c3836;
--bg-3: #32302f;
--fg-1: #ebdbb2;
--fg-2: #a89984;
--ic-1: #a89984;
--ac-1: #83a598;
--bg-bb: #076678;
--ic-2: invert(67%) sepia(5%) saturate(1223%) hue-rotate(356deg) brightness(91%) contrast(91%);
--ac-2: invert(77%) sepia(3%) saturate(1992%) hue-rotate(105deg) brightness(82%) contrast(87%);
} else if theme == gruvbox-h {
--bg-1: #1d2021;
--bg-2: #282828;
--bg-3: #32302f;
--fg-1: #ebdbb2;
--fg-2: #a89984;
--ic-1: #a89984;
--ac-1: #83a598;
--bg-bb: #076678;
--ic-2: invert(67%) sepia(5%) saturate(1223%) hue-rotate(356deg) brightness(91%) contrast(91%);
--ac-2: invert(77%) sepia(3%) saturate(1992%) hue-rotate(105deg) brightness(82%) contrast(87%);
} else if theme == nord {
--bg-1: #2e3440;
--bg-2: #364054;
--bg-3: #424c60;
--fg-1: #eceff4;
--fg-2: #d8dee9;
--ic-1: #d8dee9;
--ac-1: #7ea1cc;
--bg-bb: #587ba6;
--ic-2: invert(95%) sepia(6%) saturate(837%) hue-rotate(185deg) brightness(95%) contrast(91%);
--ac-2: invert(66%) sepia(24%) saturate(566%) hue-rotate(173deg) brightness(91%) contrast(87%);
} else if theme == discord {
--bg-1: #36393f;
--bg-2: #3d414a;
--bg-3: #4d515a;
--fg-1: #fff;
--fg-2: #99aab5;
--ic-1: #99aab5;
--ac-1: #7289da;
--bg-bb: #5c73c5;
--ic-2: invert(74%) sepia(8%) saturate(537%) hue-rotate(160deg) brightness(90%) contrast(84%);
--ac-2: invert(58%) sepia(26%) saturate(1117%) hue-rotate(192deg) brightness(90%) contrast(89%);
} else if theme == mastodon {
--bg-1: #191b22;
--bg-2: #272b36;
--bg-3: #313543;
--fg-1: #fff;
--fg-2: #9baec8;
--ic-1: #9baec8;
--ac-1: #2b90d9;
--bg-bb: #1074be;
--ic-2: invert(73%) sepia(5%) saturate(1409%) hue-rotate(176deg) brightness(96%) contrast(83%);
--ac-2: invert(56%) sepia(17%) saturate(2412%) hue-rotate(169deg) brightness(87%) contrast(94%);
} else if theme == moonlight {
--bg-1: #223;
--bg-2: #2b2b3c;
--bg-3: #334;
--fg-1: #fff;
--fg-2: #aab;
--ic-1: #aab;
--ac-1: #99e;
--bg-bb: #66b;
--ic-2: invert(77%) sepia(18%) saturate(187%) hue-rotate(201deg) brightness(88%) contrast(86%);
--ac-2: invert(62%) sepia(28%) saturate(665%) hue-rotate(202deg) brightness(97%) contrast(93%);
} else if theme == proton {
--bg-1: #1c1b22;
--bg-2: #23222b;
--bg-3: #2b2a33;
--fg-1: #fff;
--fg-2: #aaa;
--ic-1: #fbfbfe;
--ac-1: #0df;
--bg-bb: #126171;
--ic-2: invert(97%) sepia(8%) saturate(1873%) hue-rotate(183deg) brightness(107%) contrast(99%);
--ac-2: invert(65%) sepia(32%) saturate(2926%) hue-rotate(145deg) brightness(104%) contrast(105%);
} else if theme == breeze {
--bg-1: #232629;
--bg-2: #292d32;
--bg-3: #31363b;
--fg-1: #fff;
--fg-2: #aaa;
--ic-1: #aaa;
--ac-1: #3daee9;
--bg-bb: #224e65;
--ic-2: invert(79%) sepia(2%) saturate(19%) hue-rotate(325deg) brightness(89%) contrast(81%);
--ac-2: invert(63%) sepia(20%) saturate(1601%) hue-rotate(164deg) brightness(95%) contrast(93%);
} else if theme == adwaita {
--bg-1: #242424;
--bg-2: #2b2b2b;
--bg-3: #353535;
--fg-1: #f5f5f5;
--fg-2: #aaa;
--ic-1: #eeeeec;
--ac-1: #78aeed;
--bg-bb: #1b70c9;
--ic-2: invert(97%) sepia(8%) saturate(607%) hue-rotate(352deg) brightness(115%) contrast(87%);
--ac-2: invert(63%) sepia(19%) saturate(1049%) hue-rotate(174deg) brightness(103%) contrast(86%);
} else if theme == fuchsia-dark {
--bg-1: #342434;
--bg-2: #3b2b3b;
--bg-3: #463546;
--fg-1: #fdf;
--fg-2: #a8a;
--ic-1: #cbc;
--ac-1: #c74375;
--bg-bb: #7b4b7b;
--ic-2: invert(98%) sepia(86%) saturate(359%) hue-rotate(262deg) brightness(81%) contrast(96%);
--ac-2: invert(45%) sepia(24%) saturate(7496%) hue-rotate(312deg) brightness(83%) contrast(85%);
} else if theme == custom {
--bg-1: bg-1;
--bg-2: bg-2;
--bg-3: bg-3;
--fg-1: fg-1;
--fg-2: fg-2;
--ic-1: ic-1;
--ac-1: ac-1;
--bg-bb: bg-bb;
--ic-2: ic-2;
--ac-2: ac-2;
if darkButtonText {
--fg-bn: var(--bg-1) !important;
--ic-bn: invert(0%) !important;
}
}
--messenger-card-background: var(--bg-1) !important;
--surface-background: var(--bg-1) !important;
--card-background: var(--bg-1) !important;
--card-background-flat: var(--bg-3) !important;
--popover-background: var(--bg-1) !important;
--messenger-reply-background: var(--b...