Skip to content

Facebook - Dark Mode Expanded by blyad

Screenshot of Facebook - Dark Mode Expanded

Details

Authorblyad

LicenseCC BY-NC-SA 4.0

Categoryfacebook

Created

Updated

Size50 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Turns white to dark and fixes a few issues, thats pretty much it.

Notes

A couple customization options

Professional Thumbnail Creation 👍

Update 9 | 03.06.23

  • fixes everywhere

Update 8 | 09.10.22

  • fixed more shit broken by facebook
  • added option to hide Reels

Update 7 | 05.10.22 | Pora zrobić rozpierdol w Arasraka Tower

  • fixed most things that facebook fucked up
  • added translucent header option
  • minor fixes

Update 6 | 03.09.22 | O Matko Jebanie..

  • final polish of custom accent coloration
  • even more fixes due to facebook interfierence

Update 5 | 25.08.22

  • polished custom accent coloration
  • fixed another dozen of bugs made by facebook

Update 4 | 22.08.22 | It starts with..

  • added ability to change accent color
  • fixed a lot of issues that were made due to facebook changes, too lazy to list them

Update 3 | 24.06.22 | >mfw

  • corrected new login page
  • corrected poll checkboxes
  • something else, but I don't remember what and neither do I care to remember

Update 2 | 03.05.22

  • changed another login page to dark
  • corrected a few issues with current rules
  • changed something more to dark idk

Update 1 | 14.04.22

  • changed to dark reset password page

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 - Dark Mode Expanded
@namespace      github.com/blyad2137/facebook-dark-mode-expanded
@version        1.1.7
@description    `Expanded Dark Mode covers everything that still remains white and corrects some present issues on the site.`
@author         blyad (https://github.com/blyad2137)
@license		CC BY-NC-SA 4.0
@homepageURL    https://github.com/blyad2137/facebook-dark-mode-expanded
@supportURL     https://github.com/blyad2137/facebook-dark-mode-expanded/issues
@preprocessor	uso

@advanced dropdown disable-recommended "Recommended and Sponsored Stuff(on the right panel):" {
	1. "HIDE" <<<EOT .rq0escxv.du4w35lb.o387gat7.qbu88020.pad24vr5.rirtxc74.dp1hu0rb.fer614ym.ni8dbmo4.stjgntxs.lpgh02oy.be9z9djy.hlyrhctz .l9j0dhe7.du4w35lb.rq0escxv.j83agx80.cbu4d94t.pfnyh3mw.d2edcug0.discj3wi, .rq0escxv.du4w35lb.o387gat7.qbu88020.pad24vr5.rirtxc74.dp1hu0rb.fer614ym.ni8dbmo4.stjgntxs.lpgh02oy.be9z9djy.hlyrhctz .cxgpxx05 > div:nth-of-type(1) > span > div > .l9j0dhe7, .kvgmc6g5.ad2k81qe.oygrvhab.f9o22wc5.oh7imozk.ox1siiyg.mz2297xg.qmfd67dx.cx39uazk.e3zsy2ct {display: none !important;} EOT;
	2. "SHOW" <<<EOT EOT;
}
@advanced dropdown side-panels "Position of side panels:" {
	1. "To the edge" <<<EOT .rq0escxv.du4w35lb.o387gat7.qbu88020.pad24vr5.rirtxc74.dp1hu0rb.fer614ym.ni8dbmo4.stjgntxs.lpgh02oy.be9z9djy.hlyrhctz, .bdao358l.g4tp4svg.svm27lag.q75x5y04.gz8zixbs.gszy8xml.fawcizw8.rw9272rg.lq84ybu9.hf30pyar.km253p1d.cofpoq2j.dbla2kx4, .x9f619.x1ja2u2z.xnp8db0.x112wk31.xnjgh8c.xxc7z9f.x1t2pt76.x1u2d2a2.x6ikm8r.x10wlt62.x7wzq59.xxzkxad.x1daaz14 {
		position: fixed;
		right: 0;
		margin-right: 1em;
	}
	.rq0escxv.du4w35lb.o387gat7.qbu88020.pad24vr5.rirtxc74.dp1hu0rb.fer614ym.ni8dbmo4.stjgntxs.rek2kq2y.lpgh02oy.be9z9djy.bx45vsiw, .bdao358l.g4tp4svg.svm27lag.q75x5y04.gz8zixbs.gszy8xml.fawcizw8.rw9272rg.lq84ybu9.hf30pyar.sl4bvocy.km253p1d.cofpoq2j.h0j7qdxd, .x9f619.x1ja2u2z.xnp8db0.x112wk31.xnjgh8c.xxc7z9f.x1t2pt76.x1u2d2a2.x6ikm8r.x10wlt62.x1xzczws.x7wzq59.xxzkxad.x9e5oc1 {
		position: fixed;
		left: 0;
		margin-left: 1em;
	}EOT;
	2. "To the center(OG)" <<<EOT EOT;
}
@advanced dropdown disable-known-people "No, I Do Not Know These People, now fuck off" {
	1. "ON" <<<EOT .rq0escxv.l9j0dhe7.du4w35lb.pfnyh3mw.gs1a9yip.j83agx80.btwxx1t3.lhclo0ds.taijpn5t.sv5sfqaa.o22cckgh.obtkqiv7.fop5sh7t .rq0escxv.l9j0dhe7.du4w35lb.hpfvmrgz.buofh1pr.g5gj957u.aov4n071.oi9244e8.bi6gxh9e.h676nmdw.aghb5jc5.d8ncny3e.d2edcug0 .rq0escxv.l9j0dhe7.du4w35lb.hybvsw6c.io0zqebd.m5lcvass.fbipl8qg.nwvqtn77.k4urcfbm.ni8dbmo4.stjgntxs.sbcfpzgs[style] { display: none !important; } EOT;
	2. "OFF" <<<EOT EOT;
}
@advanced dropdown reels "Reels:" {
	1. "SHOW" <<<EOT EOT;
	2. "HIDE" <<<EOT .x9f619.x1n2onr6.x1ja2u2z.x2bj2ny.x1qpq9i9.xdney7k.xu5ydu1.xt3gfkd.xh8yej3.x6ikm8r.x10wlt62.xquyuld[style*="border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;"]  .x9f619.x1n2onr6.x1ja2u2z.x2bj2ny.x1qpq9i9.xdney7k.xu5ydu1.xt3gfkd.xh8yej3.x6ikm8r.x10wlt62.xquyuld[style*="border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) / 8px;"] {display: none !important;} EOT;
}
@advanced color accent "Accent Color:" hsl(207, 92%, 58%)
@advanced text hue-rotate "Accent Color for Icons:" 191deg
@advanced dropdown custom-header "Translucent Header:" {
	1. "ON" <<<EOT .x9f619.x1n2onr6.x1ja2u2z.x1ve1bff.x78zum5.xdt5ytf.x1s65kcs, .x9f619.x1ja2u2z.x1xzczws.x7wzq59[style*="z-index: 1"] .x9f619.x1n2onr6.x1ja2u2z.x78zum5.xl56j7k.x1qjc9v5.xozqiw3.x1q0g3np.x1ve1bff.xvo6coq.x2lah0s, .x9f619.x1ve1bff.x78zum5.xdt5ytf.x1s65kcs.x1r4l5d8.xds687c.xixxii4.x17qophe.x13vifvy.x1vjfegm {
			background-color: rgba(var(--header-bg),var(--header-opacity));
			backdrop-filter: blur(var(--header-blur)) saturate(1.6);
		}
	2. "OFF" <<<EOT EOT;
}
@advanced text header-opacity "Opacity of the Translucent Header:" 80%
@advanced text header-blur "Backdrop Blur of the Translucent Header:" 1rem
@advanced dropdown header-bg "Background Color of the Translucent Header:" {
	1. "BG1" <<<EOT var(--bg-1-rgb) EOT;
	2. "BG2" <<<EOT var(--bg-2-rgb) EOT;
	3. "BG3" <<<EOT var(--bg-3-rgb) EOT;
	4. "BG4" <<<EOT var(--bg-4-rgb) EOT;
}
==/UserStyle== */

@-moz-document domain("facebook.com") {
	@import url('https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap');
	
	:root, .__fb-dark-mode {
		--bg-1: #18191a;
		--bg-1-rgb: 24, 25, 26;
		--bg-2: #242526;
		--bg-2-rgb: 36, 37, 38;
		--bg-3: #3a3b3c;
		--bg-3-rgb: 58, 59, 60;
		--bg-4: rgba(11,11,11,.8);
		--bg-4-rgb: 11,11,11;
		--pt: #e4e6eb;
		--st: #b0b3b8;
		--border: #3e4042;
		--accent: /*[[accent]]*/;
		--link: var(--accent);
		--base-blue: var(--accent);
		--accent-rgb: 46, 137, 255;
		--white-rgb: 255,255,255;
		
		--header-opacity: /*[[header-opacity]]*/;
		--header-bg: /*[[header-bg]]*/;
		--header-blur: /*[[header-blur]]*/;
		--invert-1: invert(96%) sepia(0%) saturate(6922%) hue-rotate(255deg) brightness(95%) contrast(75%);
		--filter-accent: invert(40%) sepia(52%) saturate(200%) saturate(200%) saturate(200%) saturate(189%) hue-rotate(/*[[hue-rotate]]*/) brightness(103%) contrast(102%);
	}
	
	* {
		font-family: 'Maven Pro', sans-serif !important;
	}
	body.UIPage_LoggedOut, body._605a {
		background-color: var(--bg-1);
		color: var(--pt);
	}
	#contentCurve, ._8icy ._8icz, ._5tkp, ._1hcb, ._9ai8 {
		border-color: var(--border);
	}
	._95k9, ._1gax, ._4-u5, ._6s5d, ._8esf.gradient, ._97vt ._30ny, #contentCol, .uiBoxGray, ._4p8x, .lnqo2vjd, ._cue, ._1pig, .registration ._li._9bpz, ._9bq8, ._4mkt, ._1clg .inputtext, ._585r, .qsy8amke, ._io, html[id="facebook"], .e, div#u_c_1_Xa, .x6s0dn4.x443n21.x78zum5.xl56j7k.xt3ofjt {
		background-color: var(--bg-1);
	}
	.x6s0dn4.x1q0q8m5.x1qhh985.xu3j5b3.xcfux6l.x14yjl9h.xudhj91.x18nykt9.xww2gxu.x26u7qi.xm0m39n.x13fuv20.x972fbf.x9f619.x78zum5.xdt5ytf.x1iyjqo2.xs83m0k.xl56j7k.xat24cr.x11i5rnm.x1mh8g0r.xdj266r.x2lwn1j.xeuugli.x6ikm8r.x10wlt62.x1n2onr6.x1ja2u2z.xs9asl8.x1mpkggp.x1t2a60a.x123j3cw.xd7y6wv.x23j0i4 {
		background-color: var(--bg-1) !important;
	}
	#facebook ._8esf ._8e63, #facebook ._8esf ._58mk, ._c24, #facebook ._8esf ._52lp ._52lq, input, select, textarea, #facebook ._8esf ._5k_4 ._8esg, #facebook ._8esf ._5k_2 ._58mt, #facebook ._8it_ ._1v_x h2.uiHeaderTitle, .rs22bh7c, ._4-i0 ._52c9, ._15lg, #facebook ._8esj._8esf ._8eso, #facebook ._9kpl ._9kpo, .fcb, .CometSettingsPage #contentCol .uiHeader h2.uiHeaderTitle, .CometSettingsPage #contentCol .fbSettingsList h3, .CometSettingsPage #contentCol .fbSettingsEditor .fbSettingsEditorLabels, .CometSettingsPage #contentCol .fbSettingsList h3, .CometSettingsPage #contentCol .fbSettingsEditor .fbSettingsEditorLabel, ._42fu, .CometSettingsPage ._50f4, .CometSettingsPage ._39gj, .CometSettingsPage ._3o7u, ._50f7, ._3ksl, ._3ks9, ._3ksw, ._42al, ._tph ._tpl, .CometSettingsPage #contentCol .fsm, .CometSettingsPage #contentCol .fbSettingsEditorFields a[role='button'], .CometSettingsPage #contentCol h3, .fbSettingsList .fbSettingsListItemLabelWithSubtitle, .bq6qj4t2, .eitm9ape, ._55pe, ._19s-, ._2fvv, ._2x1i, ._2x1j, ._2x1p, h5._34h5, ._1clg .inputtext:focus, ._1clg .inputtext:active, ._1yhk, h3._34h5, ._59cz ._59c_ h4, ._52id, ._3x93 .uiList li, ._575j a:hover, .uiInputLabelLegacy label, ._2e9n, ._4-xi, ._5p3j, #facebook ._-kb h2, #facebook ._-kb h3, #facebook ._-kb h1, ._9o-g, ._9xo5 ._9xo6, ._9o-l, ._9si-, .pbevjfx6, .x4gvtve, .xayvuls, .do .dw, .b .cq a.cu:hover, .b .cq a.cu:focus, .b .cq a.cu, .dn, span.x1lliihq.x6ikm8r.x10wlt62.x1n2onr6.xlyipyv.xuxw1ft, body._6s5d._71pn.system-fonts--body.segoe, ._71iz {
		color: var(--pt);
	}
	.fzdkajry {
		fill: var(--pt);
	}
	#facebook ._8esf ._8e4l, #pageFooter, ._95ke #pageFooterChildren a, ._95ke .localeSelectorList a, #facebook ._8esf ._52lp ._52lr, #facebook ._8esf ._2_68, ._58mu ._58mv, ._83kf, #facebook ._8it_ ._1v_-, #facebook ._8n2m ._8n25, ._rzy, #facebook ._9kpl ._9kq2, .fcg, ._9ax- ._1rf8, .CometSettingsPage #contentCol .fbSettingsList .fbSettingsListItemContent, .CometSettingsPage #contentCol label, ._3sts, ._4p8z, ._50f8, ._33gq ._38my, ._5dwb ._38my, ._3ksa, ._2iex, .fbSettingsList .fbSettingsListItemSubtitle, .l6yax632, .CometSettingsPage .fbSettingsSectionsItemContent, .gufbqysq, ._54nc ._48u1, ._2x1k, ._5s9z, ._5s9z a, ._2vmy img, ._1clg .inputtext, ._1tvz, #facebook ._9np_ ._9o4e, #facebook ._9np_ ._9o1w, #facebook ._9np_ ._9ok8, ._erp label, ._yl9, ._3uxxj--container, #facebook ._9aha ._9ai4, ._25_a label, ._3sts label, .rtxb060y, a._39g5, .bt, .ei, ._8it_ ._2qyq {
		color: var(--st);
	}
	._1gbd {
		box-shadow: 0 0 0 1px var(--border);
	}
	._1gaz {
		background-color: var(--bg-2);
		width: auto !important;
	}
	._1gbd:hover {
		box-shadow: 0 1px 8px 5px var(--border);
	}
	._6luv, ._csi:hover ._t7b, .cwj9ozl2 {
		background-color: var(--bg-2);
	}
	html ._55r1 {
		background-color: var(--bg-3);
		border-color: var(--border);
		color: var(--pt);
	}
	._517h, ._59pe:focus, ._59pe:hover {
		background-color: var(--bg-2);
		border-color: var(--border);
		color: var(--st);
	}
	.sp_gMujFo71RwJ.sx_25f620, [src*="/__geKiQnSG-.png"], .sp_98fCI7IVTTz.sx_c4643a,  [src*="/Family-Lockup-Inline_10_light.png"], .sp_-Ww9-2lZPiS.sx_3813d1, .sp_d_7d9pz5g6w, ._8bb_ img.monochrome, ._8bb_ i.monochrome, .sp_8s3dp67SKVi.sx_9e9cb0:not(.selected .sp_8s3dp67SKVi.sx_9e9cb0), .x14hiurz:not(.x1fsd2vl.xl56j7k.x170jfvy.x78zum5.x6s0dn4 div) i {
		filter: invert(1) hue-rotate(180deg);
	}
._9ls8, ._9ls9, .lzf7d6o1, [src*="/leave-door_filled_24_fds-black.png"], [src*="/language_filled_24_fds-black.png"], [src*="/settings_outline_24_fds-gray-40.png"], [src*="/shopping-bag_outline_24_fds-gray-40.png"], [src*="/shield_outline_24_fds-gray-40.png"],  .dwxx2s2f.dicw6rsg.kady6ibp.rs0gx3tq:nth-of-type(3) .bp9cbjyn.j83agx80.taijpn5t.l9j0dhe7.datstx6m.k4urcfbm i.hu5pjgll.bixrwtb6:not(.rq0escxv.du4w35lb.ms05siws.pnx7fd3z.b7h9ocf4.pmk7jnqg.j9ispegn.kr520xx4.pedkr2u6.oqq733wu .dwxx2s2f.dicw...

Reviews

No reviews yet.