From 189a5542732f0a7e301866036248e515c12c246e Mon Sep 17 00:00:00 2001
From: Janek <27jf@web.de>
Date: Sun, 31 Mar 2019 12:47:16 +0200
Subject: [PATCH] Add darkmode

---
 darkmode.css | 1454 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 1454 insertions(+)
 create mode 100644 darkmode.css

diff --git a/darkmode.css b/darkmode.css
new file mode 100644
index 0000000..ab37cd9
--- /dev/null
+++ b/darkmode.css
@@ -0,0 +1,1454 @@
+:root {
+    --dark: #272c35;
+    --darker: #1f232a;
+    --light: #d1d1d1;
+    --lighter: #e9e9e9;
+    --accent: #7289da;
+    --icon: #e1e1e1;
+    --shadow: rgba(0, 0, 0, 0.2);
+    --mred: #a3525b;
+    --mgreen: #70a352;
+    --mblue: #527aa3;
+}
+
+
+/* Body reset. */
+
+body {
+    background: none;
+    background-color: var(--dark);
+}
+
+
+/* Scrollbar track. */
+
+*::-webkit-scrollbar-track {
+    background-color: var(--shadow);
+}
+
+
+/* Scrollbar thumb. */
+
+*::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background-color: var(--accent);
+}
+
+
+/* App wrapper. */
+
+#app .app {
+    border: 2px solid var(--darker);
+    box-shadow: 0 0 8px 1px var(--darker);
+    background: none;
+    background-color: var(--darker);
+}
+
+
+/* Accent background. */
+
+.app-wrapper::after {
+    background: none !important;
+}
+
+
+/* Log-in page. */
+
+._2NbD3 {
+    background-color: var(--darker) !important;
+}
+
+
+/* Text color. */
+
+._2NbD3 * {
+    color: var(--light);
+}
+
+
+/* Fix QR code. */
+
+._2NbD3 .XSdna {
+    border: 3px solid var(--light);
+}
+
+
+/* Disable background. */
+
+._2U_Zc:before {
+    display: none !important;
+}
+
+
+/* Landing page. */
+
+.app ._1Iexl ._3qlW9 {
+    /*box-shadow: 1px -3px 2px 0 shadow inset/**/
+    border: none;
+    background-color: var(--dark);
+}
+
+.app ._3q4NP ._3qlW9::before {
+    left: 0;
+    top: 0;
+    bottom: 6px;
+    right: 0;
+    position: absolute;
+    z-index: 98;
+    width: 90%;
+    margin: 0 5%;
+    padding-top: 40vh;
+    /**/
+    text-align: center;
+    font-size: 20px;
+    color: var(--light);
+    background: var(--dark);
+}
+
+
+/* Image. */
+
+.app ._1Iexl ._3qlW9 ._3BqNZ ._2Uo0Z {
+    width: 250px;
+    height: 250px;
+    border-radius: 50%;
+    opacity: 0.66 !important;
+}
+
+
+/* Text color. */
+
+.app ._1Iexl ._3qlW9 ._2MnNk * {
+    color: var(--light);
+}
+
+
+/* Left drawer. */
+
+#app .app #side {
+    /* TODO borders. */
+    background-color: var(--darker);
+}
+
+
+/* Chat list. */
+
+#side>header {
+    background-color: var(--darker) !important;
+}
+
+
+/* Notifications && more!! */
+
+#side ._3YewW {
+    box-shadow: inset 0 0 4px 0 var(--shadow);
+    background-color: var(--accent) !important;
+}
+
+
+/* Text color. */
+
+#side ._3YewW .l2BEH * {
+    color: var(--lighter);
+}
+
+
+/* Search or start new chat. */
+
+#side ._3CPl4 {
+    border-bottom: 0px solid var(--dark);
+    background-color: var(--darker) !important;
+    background-color: transparent !important;
+}
+
+
+/* Label background. */
+
+#side ._3CPl4 .gQzdc label,
+.gQzdc._3sdhb {
+    border: 0px solid var(--dark);
+    background-color: var(--dark) !important;
+}
+
+
+/* Input element. */
+
+#side ._3CPl4 .gQzdc label input {
+    color: var(--light);
+    background-color: transparent;
+}
+
+
+/* Active. */
+
+#side ._3CPl4 .gQzdc._3sdhb {
+    background-color: var(--dark) !important;
+    background-color: transparent !important;
+}
+
+
+/* Search results. */
+
+#side ._1AKfk {
+    color: var(--accent);
+    background-color: var(--dark);
+}
+
+
+/* Matching results. */
+
+#side .matched-text {
+    color: var(--accent) !important;
+}
+
+
+/* Contacts wrapper. */
+
+#side ._1NrpZ,
+._2fq0t ._1lIXT {
+    background-color: transparent !important;
+}
+
+
+/* Contacts. */
+
+#side ._1NrpZ ._2EXPL,
+._2fq0t ._66JgU {
+    transition: 200ms ease-in-out;
+    background-color: transparent !important;
+}
+
+
+/* On event. */
+
+#side ._1NrpZ ._2EXPL._1f1zm,
+#side ._1NrpZ ._2EXPL:hover {
+    background-color: var(--dark) !important;
+}
+
+
+/* Text color. */
+
+#side ._1NrpZ [class*="_3j7s9"] * {
+    color: var(--light);
+}
+
+
+/* Avatar wrapper background. */
+
+._1WliW {
+    box-shadow: 0 0 0px 2px var(--shadow);
+    background-color: transparent !important;
+}
+
+
+/* Settings. */
+
+._2fq0t {
+    background-color: var(--darker) !important;
+}
+
+
+/* Header color. */
+
+._2fq0t header {
+    background-color: var(--darker) !important;
+}
+
+
+/* Transparent sections. */
+
+._2fq0t ._1CRb5 {
+    box-shadow: none !important;
+    background-color: transparent !important;
+}
+
+
+/* Highlighted sections. */
+
+._2fq0t ._3hhmj ._1CkkN {
+    background-color: var(--dark) !important;
+}
+
+
+/* Profile picture height. */
+
+._2fq0t ._12fSF {
+    min-height: 200px;
+}
+
+
+/* Text color. */
+
+._2fq0t * {
+    color: var(--light);
+}
+
+
+/* Archived chats. */
+
+._2fq0t ._2Lev2 {
+    background-color: var(--dark) !important;
+}
+
+
+/* Body. */
+
+._2fq0t ._2sNbV ._1CkkN,
+._2fq0t ._2sNbV ._2EXPL {
+    background-color: transparent;
+}
+
+
+/* On event. TODO: Fixed, but it might still overlap somewhere. */
+
+.k1feT ._2sNbV>._1CkkN:hover {
+    background-color: var(--dark);
+}
+
+
+/**/
+
+
+/* New chat section. */
+
+._2fq0t .gQzdc label {
+    border: none;
+    background-color: var(--dark);
+}
+
+
+/* Input element. */
+
+._2fq0t .gQzdc label input {
+    background-color: transparent;
+}
+
+
+/* New group. */
+
+._2fq0t ._39pS- {
+    background-color: transparent !important;
+}
+
+
+/* Header. */
+
+._2fq0t ._1AKfk {
+    background-color: var(--dark) !important;
+}
+
+
+/* On event. */
+
+._2EXPL:hover {
+    background-color: var(--dark) !important;
+}
+
+
+/* Search element */
+
+._66JgU ._3_3Rs {
+    border-bottom: none !important;
+}
+
+._66JgU ._3_3Rs input,
+._66JgU ._3_3Rs ::placeholder {
+    color: var(--lighter) !important;
+}
+
+
+/* Dropdown menu. */
+
+._2uLFU,
+._1ArIP {
+    background-color: var(--darker) !important;
+}
+
+
+/* On event. */
+
+._2uLFU li:hover,
+._2ULFU li._28zBA {
+    background-color: var(--dark) !important;
+}
+
+
+/* Text color. */
+
+._2uLFU div,
+_1ArIP div {
+    color: var(--light);
+}
+
+
+/* Middle drawer. */
+
+.app ._1Iexl ._1GX8_ {
+    background-color: var(--dark);
+}
+
+
+/* Doodle background. TODO: Plans for the future. */
+
+.app ._1Iexl ._1GX8_ .pane-chat-tile {
+    /*display: none /**/
+    filter: invert(100%) opacity(0.4);
+}
+
+
+/* Header. */
+
+._1Iexl #main header {
+    border: none;
+    background-color: var(--dark);
+}
+
+
+/* Text color. */
+
+._1Iexl #main header ._1WBXd * {
+    color: var(--light);
+}
+
+
+/* Footer. */
+
+._1Iexl #main footer {
+    /*box-shadow: 0 0 8px 0 shadow /**/
+    background-color: var(--darker);
+}
+
+
+/* Input wrapper. */
+
+._1Iexl #main footer ._3oju3 {
+    border: none;
+    border-bottom: 2px solid var(--dark);
+    background-color: var(--dark);
+}
+
+
+/* Input element. */
+
+._1Iexl #main footer ._3oju3 ._2bXVy,
+._1Iexl #main footer ._3pkkz {
+    border: none !important;
+    color: var(--light);
+    background-color: var(--darker) !important;
+}
+
+._1Iexl #main footer ._3pkkz ._1Plpp {
+    border: none !important;
+    color: var(--light);
+    background-color: var(--dark) !important;
+}
+
+
+/* Hide 'Type a message' once focused. */
+
+.pluggable-input-compose.focused>div:first-child {
+    color: transparent;
+}
+
+
+/* On event smoothness. */
+
+.pluggable-input.pluggable-input-compose>div:first-child {
+    transition: 150ms ease-in-out !important;
+}
+
+
+/* Right drawer. */
+
+.app ._2yeJ5 ._2fq0t {
+    background-color: var(--darker);
+}
+
+
+/* Border-color. */
+
+.app ._2yeJ5 {
+    border-left-color: var(--darker) !important;
+}
+
+
+/* Header. */
+
+.app ._2yeJ5 ._2fq0t header {
+    background-color: var(--darker);
+}
+
+
+/* Text color. */
+
+.app ._2yeJ5 ._2fq0t header div {
+    color: var(--light);
+}
+
+
+/* Group info sections. */
+
+.app ._2yeJ5 ._2fq0t ._1CRb5 {
+    /*box-shadow: 0 1px 3px shadow /**/
+    box-shadow: none;
+    background-color: transparent;
+}
+
+
+/* Group name. */
+
+.app ._2yeJ5 ._1CRb5 ._1DTd4,
+.media-body .CzI8E {
+    margin-bottom: 10px;
+    color: var(--light);
+    border-bottom: 2px solid var(--accent) !important;
+}
+
+
+/* User's name. */
+
+.app ._2yeJ5 .copyable-text {
+    color: var(--light);
+}
+
+
+/* Accent color text. */
+
+.app ._2yeJ5 ._1CRb5 ._1sYdX {
+    font-weight: 400;
+    color: var(--accent) !important;
+}
+
+
+/* Mute/Starred Messages. */
+
+.app ._2yeJ5 ._1CRb5 ._3LL06 {
+    color: var(--light);
+}
+
+
+/* Group options. */
+
+.app ._2yeJ5 ._1CRb5 ._2EXPL,
+.app ._2yeJ5 ._1CRb5 ._1CkkN {
+    transition: 200ms ease-in-out;
+    background-color: transparent;
+}
+
+
+/* On event. */
+
+.app ._2yeJ5 ._1CRb5 ._2EXPL:hover,
+.app ._2yeJ5 ._1CRb5 ._1CkkN:hover {
+    background-color: var(--dark);
+}
+
+
+/* Text color. */
+
+.app ._2yeJ5 ._1CRb5 ._2EXPL * {
+    color: var(--light);
+}
+
+
+/* Admin color. */
+
+.app ._2yeJ5 ._1CRb5 ._2e8Mu {
+    border: 2px solid var(--accent);
+}
+
+
+/* Button background. */
+
+.app ._2yeJ5 ._1CRb5 ._1jJLh {
+    background-color: var(--accent) !important;
+}
+
+
+/* Search messages. TODO: Apply this to all search elements. */
+
+._2yeJ5 ._1iMEz {
+    background-color: var(--darkerz) !important;
+}
+
+
+/* Input wrapper. */
+
+._1iMEz label {
+    border: 0px solid var(--dark) !important;
+    background-color: var(--dark) !important;
+}
+
+._1iMEz ._3sdhb label {
+    background-color: transparent !important;
+}
+
+
+/* Input element. */
+
+._1iMEz label input {
+    background-color: transparent !important;
+}
+
+
+/* Search messages body. */
+
+._2yeJ5 .OMzAb {
+    background-color: var(--darker) !important;
+}
+
+
+/* Matching results. */
+
+._2yeJ5 .matched-text {
+    color: var(--accent) !important;
+}
+
+
+/* On event. */
+
+._2yeJ5 ._2EXPL:hover {
+    background-color: var(--dark) !important;
+}
+
+
+/* Starred messages. */
+
+._2yeJ5 .ZwkQK,
+.ZwkQK {
+    background-color: var(--darker) !important;
+}
+
+
+/* On event. */
+
+.starred-msg-wrapper,
+.MS-DH {
+    transition: 200ms ease-in-out !important;
+}
+
+
+/* On event. */
+
+.MS-DH._2-mCk,
+.MS-DH._1baOM,
+.MS-DH.ZuHmv {
+    background-color: var(--dark) !important;
+}
+
+
+/* Message info. */
+
+.pane-preview {
+    background-color: var(--dark) !important;
+}
+
+
+/* Doodle image. */
+
+.pane-preview .pane-chat-tile {
+    filter: invert(100%) opacity(0.6);
+}
+
+
+/* chat item */
+
+._2wP_Y {
+    border-bottom: 1px solid rgba(255, 255, 255, .1);
+}
+
+
+/* Read by. */
+
+._2yeJ5 ._2sNbV ._2HDl5 ._2wP_Y>div {
+    background-color: var(--dark) !important;
+}
+
+
+/* Media/docs/links section. */
+
+._2yeJ5 ._3b2Cf {
+    background-color: var(--darker) !important;
+}
+
+
+/* Active indicator. */
+
+._2yeJ5 ._3b2Cf:before {
+    background-color: var(--accent) !important;
+}
+
+
+/* Media viewer. */
+
+#app ._1zcz2,
+._3_R6X {
+    background-color: rgba(0, 0, 0, 0.85) !important;
+}
+
+
+/* Chevron background. */
+
+._3_R6X ._39uZ2,
+._298R6 {
+    background-color: var(--darker) !important;
+}
+
+
+/* Preloader. */
+
+._3dGYA {
+    background-color: var(--darker) !important;
+}
+
+
+/* Header. */
+
+#app ._1zcz2 ._2YdsD,
+._3_R6X ._1XwnX {
+    background-color: var(--dark) !important;
+}
+
+
+/* Inner element. */
+
+#app ._1zcz2 ._2EXPL {
+    background-color: transparent;
+}
+
+
+/* Text color. */
+
+#app ._1zcz2 ._2EXPL ._3j7s9 *,
+._3_R6X ._1XwnX * {
+    color: var(--light);
+}
+
+
+/* Footer. */
+
+._3Qh77 {
+    border: none !important;
+    background-color: var(--darker) !important;
+}
+
+
+/* Selected image. */
+
+._3Qh77 ._1xQmx {
+    transform: scale(1) !important;
+    border: 3px solid var(--accent) !important;
+}
+
+html[dir="ltr"] .UPNDG:hover:not(._1xQmx) {
+    border: 0px solid var(--accent);
+    outline: 3px solid var(--accent) !important;
+}
+
+
+/* Message bubbles. */
+
+.message-in {
+    background-color: var(--darker) !important;
+}
+
+.message-out {
+    background-color: #303642 !important;
+}
+
+.message {
+    background-color: var(--darker) !important;
+}
+
+
+/* Message text color. */
+
+.message-in .selectable-text,
+.message-out .selectable-text,
+.message .quoted-mention,
+.message ._1upWv {
+    color: var(--light) !important;
+}
+
+._3zb-j a {
+    color: var(--mblue) !important;
+}
+
+
+/* Message meta text color. */
+
+[class*="message-"] ._2f-RV *,
+[class*="message-"] ._2f-RV *,
+[class*="message-"] ._1_Gu6 *,
+[class*="message-"] ._27K_5 *,
+[class*="message-"] ._1DZAH *,
+[class*="message-"] ._3cMIj * {
+    color: var(--light);
+}
+
+
+/* Image/gif/video meta wrapper. */
+
+.message-gif ._2Pjvv,
+.message-image ._2TvOE {
+    bottom: 8px;
+    padding: 2px 5px;
+    border-radius: 4px;
+    background-color: var(--shadow);
+}
+
+
+/* Message options. */
+
+.message ._1i1U7 {
+    /*transition: 200ms ease-in-out;/**/
+    background: linear-gradient( to right, transparent 0%, var(--darker) 40%) !important;
+}
+
+
+/* Smooth transition. */
+
+.message span:last-child div {
+    transition: 50ms ease-in-out !important;
+}
+
+
+/* System messages. */
+
+.message-system {
+    box-shadow: 0 0 8px 0 var(--shadow);
+    background-color: var(--accent) !important;
+}
+
+
+/* Text color and shadows. */
+
+.message-system * {
+    text-shadow: none !important;
+    color: var(--lighter);
+}
+
+
+/* New message. */
+
+#main ._1mq8g {
+    border: none !important;
+    background-color: transparent !important;
+}
+
+
+/* X unread messages. */
+
+#main ._1mq8g .L89LI {
+    box-shadow: 0 0 8px 0 var(--shadow) !important;
+    color: var(--light) !important;
+    background-color: var(--darker) !important;
+}
+
+
+/* Document embeds. */
+
+.message ._1vKRe {
+    border-color: var(--darker) !important;
+}
+
+
+/* Embed background. */
+
+.message ._2CORf ._12xX7 {
+    background-color: var(--dark) !important;
+}
+
+
+/* Embed text color. */
+
+.message ._2CORf ._12xX7 * {
+    color: var(--light);
+}
+
+
+/* Link embeds. */
+
+._1sGGp._2nFG1,
+._2lwig._2nFG1 {
+    background-color: var(--dark) !important;
+}
+
+
+/* Text color. */
+
+._1sGGp._2nFG1 *,
+._2lwig._2nFG1 * {
+    color: var(--light);
+}
+
+
+/* Link options. */
+
+.message ._2DNgV._2Cju4,
+.jZ4tp._2Cju4 {
+    background: none !important;
+}
+
+
+/* Reply. (= */
+
+#main ._2EYZY {
+    box-shadow: 0 0px 4px 0 var(--darker);
+    background-color: var(--darker) !important;
+}
+
+
+/* Reply wrapper. */
+
+#main ._2EYZY ._3RNTQ {
+    padding-bottom: 5px;
+    margin: 0 50px !important;
+}
+
+
+/* Reply content. */
+
+#main ._2EYZY ._27BA_ {
+    border-radius: 5px;
+    background-color: var(--dark);
+}
+
+
+/* Text color. */
+
+#main ._2EYZY .Bmrty {
+    color: var(--light) !important;
+}
+
+
+/* Close button. */
+
+#main ._2EYZY ._3PiNI {
+    margin-left: 5px;
+    border-radius: 5px;
+    transition: 150ms ease-in-out;
+    background-color: var(--dark);
+}
+
+
+/* On event. */
+
+#main ._2EYZY ._3PiNI:hover {
+    background-color: var(--darker);
+}
+
+
+/* Select messages. */
+
+#main ._3D9Wd {
+    background-color: var(--shadow);
+}
+
+
+/* Hover over messages. */
+
+#main ._1o1sm {
+    transition: 100ms ease-in-out !important;
+}
+
+
+/* Selected message. */
+
+#main ._1o1sm:hover,
+#main ._1o1sm._2nOMz {
+    background-color: var(--shadow) !important;
+}
+
+
+/* Selected icon. */
+
+#main ._1VD7W {
+    border-color: var(--accent) !important;
+    background-color: var(--accente) !important;
+}
+
+
+/* Checkmark. */
+
+#main ._1VD7W ._1KfC8 {
+    border-bottom-color: var(--accent);
+    border-right-color: var(--accent);
+}
+
+
+/* Footer/control/options. */
+
+#main ._2FsQ8,
+#main ._3PWNn,
+#main ._3XpR2 {
+    background-color: var(--darker);
+}
+
+
+/* Text color. */
+
+#main ._2FsQ8 span,
+#main ._3XpR2 {
+    color: var(--light);
+}
+
+
+/* Bubble tails -- experimental. */
+
+.tail-container {
+    display: none !important;
+}
+
+.tail .tail-container {
+    width: 0px !important;
+    height: 12px !important;
+    z-index: -1;
+    border-top: 12px solid var(--darker);
+    -moz-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
+    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
+    background: none !important;
+}
+
+.tail.message-in .tail-container {
+    left: -10px;
+    top: 0px;
+    border: 0px !important;
+}
+
+.tail.message-out .tail-container {
+    right: -10px;
+    top: 0px;
+    border: 0px !important;
+}
+
+.tail.message-in,
+.tail.message-out {
+    border-radius: 4px !important;
+}
+
+
+/* Disable tails everywhere except in chat. */
+
+.starred-msg-wrapper .tail-container,
+.message-gallery .tail-container,
+.MS-DH .tail-container,
+.tail-container .highlight {
+    display: none !important;
+}
+
+.tail.message-out .tail-container,
+.tail.message-in .tail-container {
+    border: 0px !important;
+}
+
+
+/* Rounded corners. */
+
+.message-gallery.tail-override-left,
+.MS-DH .tail-override-left {
+    border-radius: 7.5px !important;
+}
+
+
+/* Emoji menu. */
+
+footer ._14wwJ ._1qdni,
+footer ._14wwJ ._3ETD3,
+footer ._14wwJ ._3ETD3 .R0lQ6,
+._3ETD3,
+.R0lQ6 {
+    background-color: var(--dark) !important;
+}
+
+
+/* Emoji tabs. */
+
+footer ._14wwJ ._1qdni,
+._1qdni {
+    background: var(--darker) !important;
+}
+
+
+/* Tab indicator. */
+
+footer ._14wwJ ._1qdni ._1qXED,
+._1qdni ._1qXED {
+    background-color: var(--accent) !important;
+}
+
+
+/* Search emojis. */
+
+footer ._14wwJ .R0lQ6 label,
+.R0lQ6 .mnt6B {
+    background-color: var(--darker) !important;
+}
+
+
+/* Text color. */
+
+footer ._14wwJ .R0lQ6 label input {
+    color: var(--light);
+}
+
+
+/* Gif preloader background. */
+
+footer ._14wwJ ._2s3PU {
+    border: 2px dashed var(--darker);
+    background-color: transparent;
+}
+
+
+/* Preview. */
+
+._1drQ- {
+    background-color: var(--dark) !important;
+}
+
+
+/* Header. */
+
+._1drQ- header {
+    background-color: var(--accent) !important;
+}
+
+
+/* Text color. */
+
+._1drQ- header *,
+._1drQ- .media-body * {
+    color: var(--lighter) !important;
+}
+
+
+/* Footer. */
+
+._1drQ- .media-collection {
+    background-color: var(--darker);
+}
+
+
+/* Button. */
+
+._1drQ- .media-collection .btn-fill,
+._1drQ- ._3hV1n {
+    color: var(--lighter);
+    background-color: var(--accent) !important;
+}
+
+
+/* Emoji-wanna-be-round. */
+
+.emojik {
+    transition: 200ms ease-in-out;
+    clip-path: circle(48%) !important;
+}
+
+
+/* Selected emoji. */
+
+.emojik:focus,
+.emojik:hover,
+.emojik.selected {
+    box-shadow: none !important;
+    opacity: 0.3;
+}
+
+
+/* Emoji quick selection. */
+
+._1k6Uw {
+    border: 0 !important;
+    border-bottom: 1px solid var(--darker) !important;
+    background-color: var(--darker) !important;
+}
+
+
+/* Emoji race color popup. */
+
+._1ArIP,
+._1ArIP ._1v2rQ {
+    background-color: var(--dark);
+}
+
+
+/* Separator. */
+
+._1ArIP ._2WvMb:first-child {
+    border-right: 2px solid var(--accent) !important;
+}
+
+
+/* Emoji menu triangle. */
+
+._1v2rQ {
+    background-color: var(--darker) !important;
+}
+
+
+/* Backdrop. */
+
+._3gUiM,
+#startup,
+#initial_startup {
+    background-color: var(--dark) !important;
+}
+
+
+/* Modal. */
+
+._3gUiM ._2dA13 ._1CnF3,
+._2dA13 ._18wuJ,
+._2dA13 .IuYNx {
+    background-color: var(--darker) !important;
+}
+
+
+/* Text color. */
+
+._3gUiM ._1CnF3 * {
+    color: var(--light);
+}
+
+
+/* Header. */
+
+._2dA13 header {
+    background-color: var(--accent) !important;
+}
+
+
+/* Buttons. */
+
+.PNlAR,
+._3hV1n,
+._2Gki6 {
+    color: var(--lighter) !important;
+    background-color: var(--accent) !important;
+}
+
+
+/* Muted checkbox color. */
+
+._1VD7W {
+    border-color: var(--accent);
+    background-color: var(--accent);
+}
+
+
+/* New message indicator. */
+
+#side .OUeyt {
+    background-color: var(--accent) !important;
+}
+
+
+/* Drop items. (-: */
+
+.drag-drop {
+    background-color: var(--dark) !important;
+}
+
+
+/* Border. */
+
+.drag-drop .stitching {
+    border: 5px dashed var(--accent) !important;
+    color: var(--light) !important;
+}
+
+
+/* Accent border. */
+
+.CzI8E {
+    border-bottom-color: var(--accent) !important;
+}
+
+
+/* Text color. */
+
+._7HWvs {
+    color: var(--light) !important;
+}
+
+
+/* Status area! */
+
+.app-wrapper-web ._3sacU {
+    background-color: rgba(0, 0, 0, 0.6) !important;
+}
+
+
+/* Status modal! */
+
+
+/*.app-wrapper-web ._1abwg {
+        max-width: 1396px;
+        height: calc(100% - 36px);
+        margin-left: auto;
+        margin-right: auto;
+        top: 20px; }/**/
+
+
+/* Left hand side. */
+
+._3sacU .bZ3B9 {
+    background-color: var(--darker) !important;
+}
+
+
+/* Right hand side. */
+
+._3sacU .Le35d {
+    background-color: var(--dark) !important;
+}
+
+
+/* REMOVE STUFF. */
+
+
+/* Remove pseudo elements. */
+
+[class*="chat"]:before,
+[class*="chat"]:after,
+.gQzdc:after,
+._1CkkN:before,
+._3AwwN:after,
+.MS-DH:before,
+.MS-DH:after,
+._3YwRO {
+    display: none !important;
+}
+
+
+/* Remove ONLY borders. */
+
+._1CkkN ._10xEB,
+._14oqx .DcItJ,
+html[dir] ._2EXPL:after,
+._3j7s9,
+._1fkhx {
+    border: none !important;
+}
+
+
+/* Global icon color. */
+
+span:not([data-icon="image"])>svg>path {
+    fill: var(--icon) !important;
+}
+
+
+/* Default profile picture background. */
+
+span[data-icon="default-user"] svg>path:first-child,
+span[data-icon="default-group"] svg>path:first-child {
+    fill: var(--dark) !important;
+}
+
+
+/*  Sent message. */
+
+span[data-icon="msg-dblcheck"] svg path,
+span[data-icon="status-dblcheck"] svg path,
+span[data-icon="msg-check"] svg path,
+span[data-icon="status-check"] svg path {
+    fill: var(--light) !important;
+    opacity: 0.5 !important;
+}
+
+
+/* Sent AND seen message. */
+
+span[data-icon="msg-dblcheck-ack"] svg path,
+span[data-icon="status-dblcheck-ack"] svg path,
+span[data-icon="msg-dblcheck-ack-light"] svg path {
+    fill: var(--accent) !important;
+    opacity: 1 !important;
+}
+
+
+/* Misc icons fix. */
+
+span[data-icon="chevron-left"] svg path,
+span[data-icon="chevron-right"] svg path,
+span[data-icon="x-viewer"] svg path,
+span[data-icon="download"] svg path,
+span[data-icon="forward"] svg path,
+span[data-icon="star-btn"] svg path,
+span[data-icon="audio-file"] svg path:last-child,
+span[data-icon="new-group"] svg path,
+span[data-icon="add-user-light"] svg path,
+span[data-icon="link"] svg path,
+span[data-icon="ptt-in-blue"] svg path:first-child,
+span[data-icon="ptt-out-blue"] svg path:first-child {
+    fill: var(--icon) !important;
+}
+
+
+/* Audio message icons. */
+
+span[data-icon="ptt-in-blue"] svg path:first-child,
+span[data-icon="ptt-out-blue"] svg path:first-child {
+    fill: transparent !important;
+}
+
+
+/* Logo. */
+
+span[data-icon="logo"] svg path:nth-child(1) {
+    fill: white !important;
+}
+
+span[data-icon="alert-phone"] svg path:first-child,
+span[data-icon="logo"] svg path:nth-child(1n + 2),
+span[data-icon="whatsapp-logo"] svg path:first-child {
+    fill: var(--darker) !important;
+}
+
+
+/* GIF icon opacity. */
+
+span[data-icon="emoji-gifs"] svg path {
+    fill: var(--icon) !important;
+    fill-opacity: 1 !important;
+}
+
+
+/* Be cautious icons. */
+
+span[data-icon="exit"] svg path,
+span[data-icon="thumbs-down"] svg path,
+span[data-icon="delete-danger"] svg path {
+    fill: crimson !important;
+}
+
+
+/* Audio message. */
+
+span[data-icon="audio-file"] svg path {
+    fill: rgba(255, 173, 31, 0.8) !important;
+}
+
+
+/* App-loaded animation. */
+
+html[dir="ltr"] ._3dqpi {
+    animation: _104Un 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.38);
+}
+
+._1i1U7 {
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--accent) 50%) !important;
+    border-radius: 4px !important;
+}
+
+span[data-icon="down-context"] svg path {
+    fill-opacity: 1 !important;
+}
+
+.quoted-mention {
+    color: wheat !important;
+}