dark-mode.css

:root {
	--base: #000;
	--base-ninety: rgba(255, 255, 255, 0.9);
	--base-seventy-five: rgba(255, 255, 255, 0.75);
	--base-seventy: rgba(255, 255, 255, 0.7);
	--base-fifty: rgba(255, 255, 255, 0.5);
	--base-fourty: rgba(255, 255, 255, 0.4);
	--base-thiry: rgba(255, 255, 255, 0.3);
	--base-twenty: rgba(255, 255, 255, 0.2);
	--base-five: rgba(255, 255, 255, 0.05);
	--base-ten: rgba(255, 255, 255, 0.1);
	--base-nine: rgba(255, 255, 255, 0.09);
	--container-color: #192633;
	--conversation-bg: rgb(25, 38, 51);
	--list-header-color: #202c3a;
	--blue: #0084ff;
	--unread-bg: #365899;
}

html.dark-mode body {
	color: var(--base-seventy);
	background: var(--container-color) !important;
}

/* Main container? */
html.dark-mode ._4sp8 {
	background: var(--container-color) !important;
}

/* Main content */
html.dark-mode ._1q5- {
	background: var(--container-color) !important;
	border-left: 1px solid var(--base-five) !important;
}

/* Message list: your message bubble */
html.dark-mode ._o46:not(._nd_) ._hh7 {
	background: var(--base-ten);
	color: var(--base-seventy);
}

/* Message list: remove background if emoji */
html.dark-mode ._hh7._2f5r {
	background: none !important;
}

/* Message list: remove border from messages */
._hh7._aol {
	border-color: transparent !important;
}

/* Fix dark mode overriding colors for code snippets */
html.dark-mode ._wu0 {
	color: var(--base);
}

/* message list: link in your message bubble */
html.dark-mode ._o46:not(._nd_) ._hh7 a {
	color: var(--base-seventy);
}

/* Message list: link in message bubble */
html.dark-mode ._hh7 a:hover {
	background: transparent !important;
}

/* Message list: link in incoming message bubble */
html.dark-mode ._o46._nd_ ._hh7 {
	color: var(--base-ninety);
}

/* Message list: link preview */
html.dark-mode ._5i_d {
	border: solid 1px var(--base-five);
}

/* Message list: link preview text */
html.dark-mode ._5i_d .__6k,
html.dark-mode ._5i_d .__6l {
	color: var(--base-seventy);
}

html.dark-mode ._5i_d .__6m {
	color: var(--base-fourty);
}

/* Message list: input bar */
html.dark-mode ._4rv3 {
	background: transparent !important;
	border-top: solid 1px var(--base-five);
	color: var(--base-seventy);
}

/* Message list: input bar on block */
html.dark-mode ._2wy4 {
	color: var(--base-twenty);
}

/* Message list: emoji picker selected tab */
html.dark-mode ._1uwz._1uwx {
	background: var(--base-ten);
	border-radius: 4pt;
}

/* Message list: timestamp */
html.dark-mode ._497p {
	color: var(--base-fourty);
}

/* Message list: header above */
html.dark-mode ._5742,
html.dark-mode ._673w {
	background: var(--list-header-color) !important;
	border-bottom: none;
}

/* Message list: header above (event) */
html.dark-mode ._3nta {
	background: var(--container-color) !important;
	border-bottom: 1px solid var(--base-five);
}

/* Message list: header above (event) */
html.dark-mode ._2n3t {
	background-color: var(--conversation-bg);
}

/* Message list: header above (event) */
html.dark-mode ._2n3u {
	color: var(--base-thiry);
}

/* Message list: header above (event menu small text) */
html.dark-mode ._4x7m {
	color: var(--base-thiry);
}

/* Message list: header above (event menu small text) */
html.dark-mode ._4x79 {
	color: var(--base-thiry);
}

/* Message list: header above (event menu small text) */
html.dark-mode ._4x7b {
	color: var(--base-thiry);
}

/* Message list: header above (invitation) */
html.dark-mode ._2y8z,
html.dark-mode ._14-7 ._58ah ._58al::-webkit-input-placeholder,
html.dark-mode ._58-3 {
	color: var(--base-fourty);
}

/* Message list: header above (invitation) (typed text) */
html.dark-mode ._14-7 ._58ah ._58al {
	color: var(--base-seventy);
}

/* Message list: sender (group chat) */
html.dark-mode ._ih3 {
	color: var(--base-fourty);
}

/* Messages list: user info (is in contacts) */
html.dark-mode ._36zg-e {
	color: var(--base-seventy) !important;
}

/* Messages list: user info */
html.dark-mode ._1n-e {
	color: var(--base-fourty);
}

/* Messages list: event box (event name) */
html.dark-mode ._618l {
	color: var(--base-seventy);
}

/* Messages list: event box (event icon) */
html.dark-mode ._618m {
	width: 28px;
}

/* Messages list: event box (event description) */
html.dark-mode ._618n {
	color: var(--base-thiry);
}

/* Messages list: event box (line) */
html.dark-mode ._618k div hr {
	background: var(--container-color) !important;
	border-top: 1px solid var(--base-five);
}

/* Messages list: text header above the messages */
html.dark-mode ._17w2,
html.dark-mode ._ih3 ._3oh-,
html.dark-mode ._llq ._3oh- {
	color: var(--base-seventy);
}

html.dark-mode ._2v6o {
	color: var(--base-fourty);
}

/* Messages list: typing indicator dots */
html.dark-mode ._5pd7 {
	background: var(--base-seventy) !important;
}

/* Messages list: more people read (group chat) */
html.dark-mode ._jf4 ._jf3 {
	background-color: var(--base-five) !important;
	color: var(--base-fourty) !important;
}

/* Contact list: header above */
html.dark-mode ._36ic {
	background: var(--list-header-color) !important;
	border-bottom: none;
}

/* Contact list: search input */
html.dark-mode ._5iwm ._58al {
	background: var(--base-ten) !important;
	color: var(--base-ninety);
}

html.dark-mode ._5iwm ._58al::-webkit-input-placeholder {
	color: var(--base-thirty);
}

/* Contact list: background */
html.dark-mode ._1enh {
	background: transparent !important;
}

/* Contact list: person */
html.dark-mode ._1ht1 {
	background: transparent !important;
}

/* Contact list: person (selected) */
html.dark-mode ._1ht1._1ht2 {
	background: rgba(0, 0, 0, 0.1) !important;
}

/* Contact list: person container */
html.dark-mode ._1qt4 {
	border-top: solid 1px var(--base-five) !important;
}

/* contact list: person name */
html.dark-mode ._1ht6 {
	color: var(--base-seventy);
}

/* Contact list: message blurb */
html.dark-mode ._1htf,
/* Contact list: (for format) person: message blurb */
html.dark-mode ._1htf ._4qba {
	color: var(--base-fourty);
}

/* Contact list: timestamp */
html.dark-mode ._1ht7 {
	color: var(--base-twenty);
}
/* Contact list: timestamp (selected) */
html.dark-mode ._1ht2 ._1ht7 {
	color: var(--base-fifty);
}
/* Contact list: timestamp (unread) */
html.dark-mode ._1ht3 ._1ht7 {
	color: rgba(0, 132, 255, 0.7);
}

/* contact list: search results */
html.dark-mode ._5t4c,
html.dark-mode ._5t4c ._5l37 {
	color: var(--base-seventy) !important;
}

/* Contact list: search results name */
html.dark-mode ._3q34,
html.dark-mode ._364g {
	color: var(--base-seventy);
}

/* Contact list: search results subname */
html.dark-mode ._3q35 {
	color: var(--base-fourty);
}

/* Contact list: search result label type */
html.dark-mode ._3xcx,
html.dark-mode ._225b {
	color: var(--base-fourty);
}

/* Contact list: searching text */
html.dark-mode ._4g0h {
	color: var(--base-fourty);
}

/* Contact list: unread */
html.dark-mode ._1ht3 {
	background: var(--unread-bg) !important;
}
html.dark-mode ._1ht3 ._1ht7.timestamp {
	color: var(--base-twenty);
}

/* Right sidebar */
html.dark-mode ._4_j5 {
	background: transparent;
	border-left: solid 1px var(--base-five);
}

/* Right sidebar: menus background */
html.dark-mode ._54ng {
	background: var(--conversation-bg);
}

/* Right sidebar: menus text color */
html.dark-mode ._2i-c ._54nf ._54nh {
	color: var(--base-seventy);
}

/* Right sidebar: menus selected text color */
html.dark-mode ._2i-c ._54nf .selected ._54nh {
	color: rgb(255, 255, 255);
}

/* Right sidebar: headings */
html.dark-mode ._1lj0 {
	color: var(--base-fourty);
}

/* Right sidebar: section spacer */
html.dark-mode ._1li- {
	border-top: solid 1px var(--base-five);
}

/* Right sidebar: group chat names */
html.dark-mode ._2jnv,
html.dark-mode ._5rpu {
	color: var(--base-seventy);
}

/* Right sidebar: group chat names admin label */
html.dark-mode ._5qsj {
	color: var(--base-fourty);
}

/* Right sidebar: messenger type info under name */
html.dark-mode ._3eus {
	color: var(--base-fourty);
}

/* Right sidebar: mute notification label */
html.dark-mode ._3szq {
	color: var(--base-seventy);
}

/* Right sidebar: mute notification time */
html.dark-mode ._3x6v {
	color: var(--base-fourty);
}

/* Right sidebar: people list */
html.dark-mode ._4_j5 ._5l37 {
	color: var(--base-fourty);
	background: transparent;
}

/* Right sidebar: people list (add people) */
html.dark-mode ._4rph ._4rpj {
	border-top: solid 1px var(--base-ten) !important;
}

/* Invite friends popup */
html.dark-mode ._4jgu {
	background-color: var(--conversation-bg);
}

html.dark-mode ._5rh4 {
	color: var(--base-seventy);
}

/* Right sidebar: people list item (name) */
html.dark-mode ._364g,
html.dark-mode ._3x6u,
html.dark-mode ._4rph ._4rpj {
	color: var(--base-seventy);
}

/* Photos info color */
html.dark-mode ._2zn2 {
	color: var(--base-seventy);
}

html.dark-mode ._2zn6 {
	color: var(--base-fourty);
}

/* New conversation contact list: popup */
html.dark-mode ._2y8_ {
	background-color: var(--container-color);
	border: solid 1px var(--base-five);
}

/* New conversation contact list: popup hr */
html.dark-mode ._5l38 {
	border-top: 1px solid var(--base-ten);
}

/* New conversation contact list: popup hover */
html.dark-mode ._1k1p ._5l38 {
	border-top: none;
}
html.dark-mode ._5l37:active,
html.dark-mode ._1k1p {
	background-color: var(--base-five) !important;
}

/* Conversation search */
html.dark-mode ._33p7 {
	background-color: var(--conversation-bg);
}
html.dark-mode ._33p7 ._b-u,
html.dark-mode ._33p7 ._b-v {
	background-color: transparent !important;
	background-image: url('https://static.xx.fbcdn.net/rsrc.php/v3/yG/r/CV3cVGSAcf3.png') !important;
	background-repeat: no-repeat !important;
	background-size: auto !important;
}
html.dark-mode ._33p7 ._b-u {
	background-position: 0 -42px !important;
}
html.dark-mode ._33p7 ._b-v {
	background-position: 0 0 !important;
}
html.dark-mode ._33p7 input {
	color: var(--base-seventy);
	background-color: var(--base-five);
}
html.dark-mode ._33p7 ._5iwn ._58ak::before {
	filter: invert();
}

/* Poll */
/* Border */
html.dark-mode ._3b4t {
	border-color: var(--base-nine);
}
/* "Poll" header text */
html.dark-mode ._4qba {
	color: var(--base-seventy);
}
/* Voting options text */
html.dark-mode ._1mr_,
html.dark-mode ._1mq_ ._1mq- {
	color: var(--base-fourty);
}
/* Check box colors */
html.dark-mode ._2m5p[aria-checked='false'][role='checkbox'] {
	border: 1px solid var(--base-ten);
}
/* New option text box */
html.dark-mode ._58al {
	color: #fff;
}
/* Poll results bar graph colors */
html.dark-mode ._3b4h {
	background-color: var(--base-nine);
}
/* Poll results profile pictures */
html.dark-mode ._4mnq {
	border-color: var(--container-color);
}
html.dark-mode ._34n6 {
	color: var(--base-fourty);
	background-color: var(--base-nine);
}

/* Message reaction buttons */
html.dark-mode ._aou,
html.dark-mode ._4kf5 {
	background-color: var(--conversation-bg);
}

/* Message action buttons */
html.dark-mode ._3erg ._hh7 a._2q1l,
html.dark-mode ._2f5n {
	background-color: var(--container-color);
}

/* Bot quick-reply buttons */
html.dark-mode ._3u69 {
	background: var(--container-color) !important;
}

/* Bot quick-reply button border */
html.dark-mode ._36wf {
	border: 1px solid var(--base-five) !important;
}

/* Bot card title */
html.dark-mode ._3cn0 {
	color: var(--base-seventy);
}

/* Bot card content */
html.dark-mode ._3cnl,
._3cnn a,
._3cnj {
	color: var(--base-fourty);
}

/* Dialogs */
html.dark-mode ._53ij,
html.dark-mode ._4eby,
html.dark-mode ._2c9g {
	background: var(--container-color) !important;
}

/* Dialog: preferences text */
html.dark-mode ._374b ._374d ._4ng2 {
	color: var(--base-seventy);
}
html.dark-mode ._374b ._374d ._6cs7 {
	color: var(--base-fourty);
}

/* Dialog: title and names */
html.dark-mode ._374c,
html.dark-mode ._4ebz,
html.dark-mode ._2c9i ._19jt,
html.dark-mode .uiInputLabelLabel {
	color: var(--base-seventy) !important;
}

/* Send cash dialog background */
html.dark-mode ._49no,
html.dark-mode ._2z8r {
	background-color: transparent !important;
}

/* Send cash dialog disabled */
html.dark-mode ._3org {
	background-color: var(--base-twenty) !important;
}

/* Send cash dialog primary text */
html.dark-mode ._39r6 {
	color: var(--base-seventy) !important;
}

/* Send cash dialog secondary text */
html.dark-mode ._39r7 {
	color: var(--base-fourty) !important;
}

/* Gif and sticker dialog: hide white triangle */
html.dark-mode ._53io {
	visibility: hidden;
}

/* Gif and sticker dialog: style the bottom of the list */
html.dark-mode .uiScrollableArea.contentAfter::after {
	background: linear-gradient(rgba(25, 38, 51, 0.05), var(--container-color));
}

/* Sticker dialog: selected header */
html.dark-mode ._5r8a._5r8b,
html.dark-mode ._eb3::before {
	background-color: var(--base-five);
}

/* Sticker dialog: header borders */
html.dark-mode ._5r8e,
html.dark-mode ._5r86 {
	border-color: var(--base-five);
}

/* Record dialog: time */
html.dark-mode ._3z53 {
	color: var(--base-seventy);
}

/* Delete popover */
html.dark-mode ._hw2 ._53ij {
	background-color: var(--base-seventy) !important;
}

/* Login tile and names */
html.dark-mode ._5hy4,
html.dark-mode ._3403 {
	color: var(--base-fourty) !important;
}

/* Login inputs */
html.dark-mode ._55r1._5f0v._43di {
	background: var(--base-ten) !important;
	color: var(--base-seventy-five);
}

/* Login button */
html.dark-mode button:not(._5upp) {
	background: var(--container-color) !important;
}

/* Fix the Sticker and Gaming buttons */
html.dark-mode ._4rv6,
html.dark-mode ._4ce_ {
	filter: invert(1) !important;
	opacity: 0.6 !important;
}

/* Fix the @name-popover in the chat input box */
html.dark-mode ._13iv {
	background: var(--container-color) !important;
}

/* Gaming popover */
/* Gaming popover header text */
html.dark-mode ._4lh7 {
	color: var(--base-seventy);
}

/* Gaming popover header */
html.dark-mode ._53ij ._3rh0 {
	background: var(--list-header-color) !important;
}

/* Gaming popover content */
html.dark-mode ._53ij ._4lh2 {
	background: var(--container-color) !important;
}

/* Gaming popover "PLAY" text color */
html.dark-mode ._30vt ._4qba {
	color: var(--blue);
}

/* Tomorrow dark theme for code blocks */
html.dark-mode ._wu0 {
	--code-block-base: #c5c8c6;
	--code-block-background: #1d1f21;
	--code-block-border: #0a0c14;
}

/* Plan dialog primary text */
html.dark-mode ._4dx5,
html.dark-mode ._38wl {
	color: var(--base-seventy) !important;
}

/* Plan dialog input fields */
html.dark-mode ._2mes._3smo ._3smp,
html.dark-mode ._5pw9,
html.dark-mode ._5pw6 {
	background-color: transparent !important;
	color: var(--base-fourty) !important;
}

/* Plan dialog time selector active highlight */
html.dark-mode ._5pw1 {
	background: var(--base-nine);
}

/* Rich media integration text */
html.dark-mode ._29ey {
	color: var(--base-fourty) !important;
}
html.dark-mode .fbNubFlyoutAttachments,
html.dark-mode .chatAttachmentShelf {
	background: var(--container-color) !important;
	color: var(--base-seventy);
}
html.dark-mode .chatAttachmentShelf {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
html.dark-mode .chatAttachmentShelf .__6k,
html.dark-mode .chatAttachmentShelf .__6l {
	color: inherit;
}

/* Fixes appearance of attached files */
html.dark-mode ._2zl5 {
	border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode ._2-x5,
html.dark-mode .__6k,
html.dark-mode .__6l {
	color: var(--base-seventy);
	background: var(--container-color);
}
html.dark-mode ._4gd0 {
	background: transparent;
}

/* Fix color on links */
html.dark-mode .__6j._43kk {
	border-color: rgba(255, 255, 255, 0.1) !important;
}