Changes Facebook dark mode to dark-blue mode.
Removed a lot of bloating features that I personally don't use.
Facebook Subtle Blue Debloated by DAndrewBox
Details
AuthorDAndrewBox
LicenseCC Zero
Categorywww.facebook.com
Created
Updated
Size18 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
IF SOMEONE KNOWS HOW TO ADD VARIABLES TO SELECT ON THE EXTENSION PLEASE HELP ME :(
Requires facebook dark mode to work.
Note:
This style removes: live video post button, video & calls options in messenger, "my pages" and birthdays on right-bar, "watch" section, among other stuff.
And add some custom scroll bars and UI fixes too!
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Facebook Subtle Blue Debloated
@version 20240730.13.34
@namespace https://userstyles.world/user/DAndrewBox
@description Changes Facebook dark mode to dark-blue mode.Removed a lot of bloating features that I personally don't use.
@author DAndrewBox
@license CC Zero
==/UserStyle== */
/* ==UserStyle==
@preprocessor stylus
@var checkbox customScrollBars "Use custom scrollbars" 1
@var checkbox debloatNewPost "Debloat Make Post on main page" 1
@var checkbox debloatPosts "Hide Join & Hide post options" 1
@var checkbox hideCalls "Hide call icons" 1
@var checkbox hideMessengerSections "Hide Messenger Sections" 1
@var checkbox hideFooter "Left Sidebar: Hide footer & metadata" 1
@var checkbox hideWatchAndGames "Left Sidebar: Hide Watch & Games" 1
@var checkbox hidePagesAndBirthdays "Right Sidebar: Hide Pages & Birthdays" 1
@var checkbox photosHideLeftBar "Photos: Hide left sidebar" 1
@var checkbox photosHideCommentExtra"Photos: Hide extra attachment icons" 1
@var checkbox photosHideUserChange "Photos: Hide user & page change" 1
@var checkbox photoHideReactionsAndShare "Photos: Hide reactions and shares" 1
@var checkbox msnDebloatChatbox "Messenger: Debloat chatbox" 1
@var checkbox msnHideFooter "Messenger: Hide footer" 1
@var checkbox msnHideCalls "Messenger: Hide video & call icons" 1
@var checkbox debloatComments "Comments Box: Remove extra options" 1
==/UserStyle== */
@-moz-document regexp("^https:\\/\\/(?:www|web)\\.facebook\\.com\\/.*") {
/* Main Page (Web) */
div.x6s0dn4.x78zum5.xcud41i > span:nth-child(3) {
margin-right: .25rem;
}
div.x9f619.x1n2onr6.x1ja2u2z.__fb-light-mode {
background-color: #383850f2;
}
/* Debloat header start */
ul.xuk3077 > li:nth-child(1),
ul.xuk3077 > li:nth-child(4) {
max-width: 22.5rem
}
ul.xuk3077 > li:nth-child(2),
ul.xuk3077 > li:nth-child(3),
ul.xuk3077 > li:nth-child(5) {
display: none;
}
/* Debloat header end */
div.x1iorvi4.x4uap5.xwib8y2.xkhd6sd > div:nth-child(2),
div.x1iorvi4.x4uap5.xwib8y2.xkhd6sd > div:nth-child(3),
div.x1iorvi4.x4uap5.xwib8y2.xkhd6sd > div:nth-child(4) {
display: none;
}
span > div.x1emribx.xeuugli,
span > div.x1emribx.xeuugli > div {
width: 100%;
}
div.x6prxxf.xz9dl7a > span:last-child {
display: none;
}
div.xsag5q8 > div {
margin-right: .66rem;
}
div > div.x10h3on {
border-radius: 0px 0px 1rem 1rem;
}
div.xu96u03.xm80bdy.x10l6tqk.x13vifvy > div {
transform: translate(16px, 3px) !important;
}
div.x1emribx > div.x1n2onr6[role="dialog"] > div {
border-radius: 0px 0px 1rem 1rem;
}
div.x1qhmfi1,
div.x19xcq9t {
background-color: var(--comment-background);
}
div[role="banner"] > * > div > div.xl56j7k.x1emribx:nth-child(2) > span > span > * {
outline: 1px var(--comment-background) solid;
border-radius: 3rem;
background-color: var(--comment-background);
}
div.__fb-light-mode > div > span {
background-color: #383850f2 !important;
}
/* customScrollBars start */
html::-webkit-scrollbar {
width: .50rem;
height: .66rem;
background-color: #20222e;
}
html::-webkit-scrollbar-thumb {
background-color: rgba(247, 249, 249, .20);
}
div[role="textbox"]::-webkit-scrollbar,
div.x78zum5::-webkit-scrollbar {
width: .25rem;
height: .66rem;
background-color: #20222e;
border-radius: 2rem;
}
div[role="textbox"]::-webkit-scrollbar-thumb,
div.x78zum5::-webkit-scrollbar-thumb {
border-radius: 2rem;
background-color: rgba(247, 249, 249, .33);
}
div.x78zum5::-webkit-scrollbar {
width: .5rem;
background-color: #383850;
border-radius: 0px 0px 2rem 2rem;
}
/* customScrollBars end */
/* hideCalls start */
div.x6s0dn4.x78zum5.xcud41i > span:nth-child(1),
div.x6s0dn4.x78zum5.xcud41i > span:nth-child(2) {
display: none;
}
div.x1q0g3np.xzt5al7 > div:nth-child(2) > div > div:nth-child(2) > * > * > div.x78zum5 > span:first-child {
display: none;
}
/* hideCalls end*/
/* debloatNewPost start */
div.x1y1aw1k.x1yztbdb {
display: none;
}
div.x1i10hfl.xjbqb8w.xwib8y2.xurb0ha[role="button"]:first-of-type {
display: none;
}
/* debloatNewPost end */
/* hidePagesAndBirthdays start */
div[role="complementary"] > * > * > * > div.x1y1aw1k {
padding-top: 0;
}
div[role="complementary"] > * > * > * > div.x1y1aw1k > div:first-child {
display: none;
}
div[role="complementary"] > * > * > * > div.x1y1aw1k > div:nth-child(2) > div.x1n2onr6 > div.xwib8y2.x1y1aw1k > div > ul.x1hc1fzr > li:nth-child(n+19) {
display: none;
}
div[role="complementary"] > * > * > * > div.x1y1aw1k > div:nth-child(3) {
display: none;
}
/* hidePagesAndBirthdays end */
/* hideFooter start */
footer[role="contentinfo"] {
display: none;
}
/* hideFooter end */
/* hideMessengerSections start */
div.x139jcc6.xcud41i.x1swvt13.x1pi30zi.x1y1aw1k.xwib8y2 {
display: none;
}
header.x1swvt13 > div:nth-child(2) > div:nth-child(2),
header.x1swvt13 > div:nth-child(2) > div:nth-child(3),
header.x1swvt13 > div:nth-child(2) > div:nth-child(4) {
display: none;
}
/* hideMessengerSections end */
/* debloatPosts start */
div.x1cy8zhl.x78zum5.x1swvt13.xz9dl7a > div > a[href="#"],
div.x6prxxf.xk50ysn.xvq8zen > span:nth-child(2) {
display: none;
}
div.x11xbgvx.x10l6tqk.x1v4kod4 {
display: none;
}
/* debloatPosts end */
/* hideStories start */
div.x193iq5w.xgmub6v.x1ceravr {
display: none;
}
/* hideStories end */
/* debloatComments start */
ul[data-id="unfocused-state-actions-list"] > li:first-child,
ul[data-id="unfocused-state-actions-list"] > li:nth-child(4),
ul[data-id="unfocused-state-actions-list"] > li:nth-child(5) {
display: none;
}
/* debloatComments end */
:root,
__fb-dark-mode,
* {
--fds-black: #151620;
--fds-black-alpha-05: rgba(21, 22, 32, 0.05);
--fds-black-alpha-10: rgba(21, 22, 32, 0.1);
--fds-black-alpha-15: rgba(21, 22, 32, 0.15);
--fds-black-alpha-20: rgba(21, 22, 32, 0.2);
--fds-black-alpha-30: rgba(21, 22, 32, 0.3);
--fds-black-alpha-40: rgba(21, 22, 32, 0.4);
--fds-black-alpha-50: rgba(21, 22, 32, 0.5);
--fds-black-alpha-60: rgba(21, 22, 32, 0.6);
--fds-black-alpha-80: rgba(21, 22, 32, 0.8);
--fds-blue-05: #151620;
--fds-blue-30: #151620;
--fds-blue-40: #151620;
--fds-blue-60: #151620;
--fds-blue-70: #151620;
--fds-blue-80: #151620;
--fds-button-text: #151620;
--fds-comment-background: #151620;
--fds-dark-mode-gray-35: #151620;
--fds-dark-mode-gray-50: #151620;
--fds-dark-mode-gray-70: #151620;
--fds-dark-mode-gray-80: #151620;
--fds-dark-mode-gray-90: #151620;
--fds-dark-mode-gray-100: #151620;
--fds-gray-00: #151620;
--fds-gray-05: #151620;
--fds-gray-10: #151620;
--fds-gray-20: #151620;
--fds-gray-25: #151620;
--fds-gray-30: #151620;
--fds-gray-45: #151620;
--fds-gray-70: #151620;
--fds-gray-80: #151620;
--fds-gray-90: #151620;
--fds-gray-100: #151620;
--fds-green-55: #151620;
--fds-highlight: #151620;
--fds-highlight-cell-background: #151620;
--fds-primary-icon: #ffffff;
--fds-primary-text: #ffffff;
--fds-red-55: #151620;
--fds-soft: cubic-bezier(.08, .52, .52, 1);
--fds-spectrum-aluminum-tint-70: #151620;
--fds-spectrum-blue-gray-tint-70: #151620;
--fds-spectrum-cherry: #151620;
--fds-spectrum-cherry-tint-70: #151620;
--fds-spectrum-grape-tint-70: #151620;
--fds-spectrum-grape-tint-90: #151620;
--fds-spectrum-lemon-dark-1: #151620;
--fds-spectrum-lemon-tint-70: #151620;
--fds-spectrum-lime: #151620;
--fds-spectrum-lime-tint-70: #151620;
--fds-spectrum-orange-tint-70: #151620;
--fds-spectrum-orange-tint-90: #151620;
--fds-spectrum-seafoam-tint-70: #151620;
--fds-spectrum-slate-dark-2: #151620;
--fds-spectrum-slate-tint-70: #151620;
--fds-spectrum-teal: #151620;
--fds-spectrum-teal-dark-1: #151620;
--fds-spectrum-teal-dark-2: #151620;
--fds-spectrum-teal-tint-70: #151620;
--fds-spectrum-teal-tint-90: #151620;
--fds-spectrum-tomato: #151620;
--fds-spectrum-tomato-tint-30: #151620;
--fds-spectrum-tomato-tint-90: #151620;
--fds-strong: cubic-bezier(.12, .8, .32, 1);
--fds-white: #151620;
--fds-white-alpha-05: rgba(21, 22, 32, 0.05);
--fds-white-alpha-10: rgba(21, 22, 32, 0.1);
--fds-white-alpha-20: rgba(21, 22, 32, 0.2);
--fds-white-alpha-30: rgba(21, 22, 32, 0.3);
--fds-white-alpha-40: rgba(21, 22, 32, 0.4);
--fds-white-alpha-50: rgba(21, 22, 32, 0.5);
--fds-white-alpha-60: rgba(21, 22, 32, 0.6);
--fds-white-alpha-80: rgba(21, 22, 32, 0.8);
--fds-yellow-20: #151620;
--accent: #4599FF;
--always-white: #ffffff;
--always-black: #000000;
--always-dark-gradient: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
--always-dark-overlay: rgba(0, 0, 0, 0.4);
--always-light-overlay: rgba(255, 255, 255, 0.4);
--always-gray-40: #65676B;
--always-gray-75: #BCC0C4;
--always-gray-95: #F0F2F5;
--attachment-footer-background: rgba(255, 255, 255, 0.1);
--background-deemphasized: rgba(255, 255, 255, 0.1);
--base-blue: #1877F2;
--base-cherry: #F3425F;
--base-grape: #9360F7;
--base-lemon: #F7B928;
--base-lime: #45BD62;
--base-pink: #FF66BF;
--base-seafoam: #54C7EC;
--base-teal: #2ABBA7;
--base-tomato: #FB724B;
--text-badge-info-background: hsl(214, 100%, 59%);
--text-badge-success-background: #31A24C;
--text-badge-attention-background: hsl(40, 89%, 52%);
--text-badge-critical-background: #e41e3f;
--blue-link: #4599FF;
--border-focused: #8A8D91;
--card-background: #20222e;
--card-background-flat: #323436;
--comment-background: #383850;
--comment-footer-background: #20222e;
--dataviz-primary-1: rgb(48, 200, 180);
--disabled-button-background: rgba(255, 255, 255, 0.2);
--disabled-button-text: rgba(255, 255, 255, 0.3);
--disabled-icon: rgba(255, 255, 255, 0.3);
--disabled-text: rgba(255, 255, 255, 0.3);
--divider: #3E4042;
--event-date: #F3425F;
--...