Franz dark mode theme for Whatsapp (updated 23/10/19)

darkmode.css

/* 

  - OSX: ~/Library/Application\ Support/Franz/recipes/whatsapp/darkmode.css
  - Windows: %appdata%/Franz/recipes/whatsapp/darkmode.css
  - Linux: ~/.config/Franz/recipes/whatsapp/darkmode.css

*/

/* ==UserStyle==
@name         WhatsApp by Mew
@description  A customizable theme for WhatsApp.
@namespace    github.com/vednoc/onyx
@homepageURL  https://github.com/vednoc/onyx
@supportURL   https://github.com/vednoc/onyx/issues
@updateURL    https://rawgit.com/vednoc/onyx/master/WhatsApp.user.css
@version      1.4.3
@author       vednoc
@license      MIT
@preprocessor uso

@var color dark "Dark" #272c35
@var color darker "Darker" #1f232a
@var color light "Light" #d1d1d1
@var color lighter "Lighter" #e9e9e9
@var color accent "Accent" #7289da
@var color icon "Icons" #e1e1e1
@var color shadow "Shadow" rgba(0,0,0,0.12)
@var color mred "Red-ish" #A3525B
@var color mgreen "Green-ish" #70A352
@var color mblue "Blue-ish" #527AA3
@var text emojiOpacity "Emoji opacity" 0.75
@var text customImage "Custom image" url(replace-with-image-address)
@var text customRules "Custom CSS rules" #test::after { content: "paste all your custom css here!" !important; }
@var text customFonts "Custom fonts" "'custom-font', 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Lucida Grande', 'Arial', 'Ubuntu', 'Cantarell', 'Fira Sans',"
@var text customCompact "Compact mode breakpoint" 720px

@advanced dropdown background "App background" {
  bg1 "Default theme image" <<<EOT
  #app > div::after {
    top: 0px; right: 0px;
    bottom: 0px; left: 0px;
    height: auto; width: auto;
    background-color: var(--dark) !important;
    background-image: var(--image) !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; } EOT;
  bg2 "Your custom image" <<<EOT
  #app > div::after {
    top: 0px; right: 0px;
    bottom: 0px; left: 0px;
    height: auto; width: auto;
    background-color: var(--dark) !important;
    background-image: /*[[customImage]]*\/ !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; } EOT;
  bg3 "Default WA image" <<<EOT
  #app > div::after {
    opacity: var(--emojiOpacity) !important;
    background-color: var(--accent) !important; } EOT;
  bg4 "No image" <<<EOT
  #app > div::after {
    display: none !important; } EOT;
}

@advanced dropdown doodles "Chat doodles" {
  doodle1 "Light doodles" <<<EOT
  #app [data-asset-chat-background="true"] {
    filter: invert(100%) opacity(0.45) !important; } EOT;
  doodle2 "Dark doodles" <<<EOT
  #app [data-asset-chat-background="true"] {
    filter: opacity(0.5) !important; } EOT;
  doodle3 "Disable doodles" <<<EOT
  #app [data-asset-chat-background="true"] {
    display: none !important; } EOT;
}

@advanced dropdown blurContacts "Blur contacts" {
  disable "Disable" <<<EOT
  /* Disabled. *\/
  EOT;
  enable "Enable" <<<EOT
  /* Blurry mode for contacts. *\/
  #pane-side [style*="height"] > div > div[class] {
    filter: blur(8px); }
  #pane-side [style*="height"] > div > div._3mMX1,
  #pane-side [style*="height"] > div > div:hover {
    filter: blur(0px); } EOT;
}

@advanced dropdown blurImages "Blur images" {
  disable "Disable" <<<EOT
  EOT;
  enable "Enable" <<<EOT
  /* Blurry mode for images. *\/
  #main [style*="height"] > img {
    transition: 500ms ease-in-out;
    transition-delay: 0ms;
    filter: blur(10px) grayscale(100%); }
  #main [style*="height"] > img:hover {
    transition-delay: 500ms;
    filter: blur(0px) grayscale(0%); } EOT;
}

@advanced dropdown fullscreen "Fullscreen mode" {
  disable "Disable" <<<EOT
  /* Disabled. *\/
  EOT;
  enable "Enable" <<<EOT
  /* Fullscreen. *\/
  #app > div > .app,
  #app > div > span [data-animate-status-v3-modal-background] > div  {
    height: calc(100% - 0px);
    top: 0px;
    width: 100%; }
  /* Outline and round edges. *\/
  #app .app {
    box-shadow: none !important;
    border-radius: 0px; }
  /* Disable background image. *\/
  #app > div::after {
    display: none !important; } EOT;
}

@advanced dropdown tails "Message tails" {
  enable "Enable" <<<EOT
  EOT;
  disable "Disable" <<<EOT
  .tail-container {
    display: none !important; }
  .tail {
    border-radius: 7.5px !important; } EOT;
}

@advanced dropdown compactMode "Compact mode for small resolutions" {
  enable "Enable" <<<EOT
  @media screen and (max-height: 500px) {
    /* App height reset. *\/
    #app > div > .app { min-height: auto; }
  }
  @media screen and (max-width:/*[[customCompact]]*\/) {
    /*.app > div { box-shadow: 0 0 0 2px inset crimson !important; } /**\/

    /* Fix header width hiding icons. *\/
    #side > header { min-width: 240px; }
    /* Hide notifications. *\/
    #side > header + span { display: none }

    /* Contacts *\/
    .app > div:nth-child(3) {
      transition: 0;
      flex: 0 0 75px !important; }
    .app > div:nth-child(3):hover {
      transition-delay: 0.99s;
      flex: 0 0 40% !important; }
    /* Search bar width. *\/
    .ZP8RM:not(._19OGD) label {
      padding: 0px; }
    /* Contact list reset when right is active. *\/
    .app.three > div:nth-child(3) {
      flex: 0 0 75px !important;
      margin-left: -75px !important; }

    /* Chat section. *\/
    ._1Iexl {
      flex: 0 0 65% !important; }

    /* On hover or active sub-menus. *\/
    .app.two > .k1feT:hover,
    .MZIyP .k1feT {
      transition-delay: 1s !important;
      /* TODO: Adjust panel width. *\/
      flex: 0 0 30% !important; }

    /* Info flexbox. *\/
    .three ._3HZor {
      width: calc(100% - 75px) !important;
      left: 75px !important; }

    /* Chat flexbox. *\/
    .two > ._1Iexl {
      margin: 0 !important;
      flex: 0 0 calc(100% - 75px) !important; }

    /* Search contacts. *\/
    .two .k1feT:not(:hover) ._2MSJr {
      padding: 0; }

    /* On hover. *\/
    .two .k1feT:hover ._2MSJr {
      transition-delay: 1s !important; }

    /** Hack for positioning unread counter. *\/
    #side:not(:hover) ._3j7s9 ._1AwDx ._3Bxar span > div {
      z-index: 101;
      position: absolute; }
    /* ? Unread counter. *\/
    #side:not(:hover) div > .OUeyt {
      height: 18px;
      padding: 0 5px 0 5px;
      margin: -5px 0 0 -35px;
      background-color: var(--dark) !important;
      box-shadow: 0 0 0 3px var(--darker) !important; }
    /* On event. *\/
    /*#side:hover div > .OUeyt {
      background-color: var(--dark) !important;
      box-shadow: 0 0 0 3px var(--darker) !important; }*\/

    /* ? Message status. *\/
    .two .k1feT ._3j7s9 ._1VfKB {
      z-index: 101;
      position: absolute;
      margin-left: -68px;
      margin-top: 5px;
      border-radius: 50%;
      background-color: var(--dark);
      box-shadow: 0 0 0 3px var(--darker); }
    /* Background on event. *\/
    .two .k1feT ._2EXPL:hover ._1VfKB,
    .two .k1feT ._2EXPL._1f1zm ._1VfKB {
      background-color: var(--darker);
      box-shadow: 0 0 0 3px var(--dark) !important; }

    /** Icon size. *\/
    .two .k1feT ._3j7s9 ._1VfKB span > svg {
      padding: 2px;
      height: 14px !important;
      width: 14px !important; }

    /* Hide all icons except new messages. *\/
    .two .k1feT ._15G96 span:not(.OUeyt),
    .two .k1feT .ZR5SB {
      display: none !important; }
  }
  @media screen and (max-width: 720px) {
    /* Width overflow fix. *\/
    ._3dqpi {
      min-width: 100%; }

    /* On hover or active sub-menus. *\/
    .app.two > .k1feT:hover,
    .MZIyP .k1feT {
      transition-delay: 1s !important;
      flex: 0 0 40% !important; }
  } EOT;
  disable "Disable" <<<EOT
  /* Disabled. *\/
  EOT;
}
==/UserStyle== */

:root {
  --dark: #272c35;
  --darker: #1f232a;
  --light: #d1d1d1;
  --lighter: #e9e9e9;
  --accent: #7289da;
  --icon: #e1e1e1;
  --shadow: rgba(0, 0, 0, 0.12);
  --mred: #a3525b;
  --mgreen: #70a352;
  --mblue: #527aa3;
  --image: url(https://media.discordapp.net/attachments/310799529161129984/417408747812552715/zilesanamin.jpg);
  --emojiOpacity: 0.75;
  --version: "WhatsApp by Mew v1.5.1";
  --message: "Updated on 27th of September. ";
  --changes: "See the changelog at: https://github.com/vednoc/onyx/releases";
}

/* Body reset. */
body {
  font-family: "'custom-font', 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Lucida Grande', 'Arial', 'Ubuntu', 'Cantarell', 'Fira Sans'," sans-serif;
  background: none;
  background-color: var(--dark); }

/* Scrollbar track. */
*::-webkit-scrollbar-track {
  background-color: var(--shadow); }
/* Scrollbar thumb. */
*::-webkit-scrollbar-thumb {
  background-color: var(--accent); }
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--shadow); }

/* Highlight selection. */
::selection {
  color: var(--light) !important;
  background-color: var(--accent) !important; }
::-moz-selection {
  color: var(--light) !important;
  background-color: var(--accent) !important; }
/* Input placeholders. */
::placeholder { color: var(--lighter) !important; }
::-moz-placeholder { color: var(--lighter) !important; }
::-webkit-input-placeholder { color: var(--lighter) !important; }

/* Progress. */
progress[value]::-webkit-progress-bar {
  background: var(--darker); }
/* Value. */
progress[value]::-webkit-progress-value {
  background: var(--accent); }
progress {
  background: var(--darker); }
::-moz-progress-bar {
  background: var(--accent) !important; }

/* App wrapper. */
#app .app {
  background: none;
  background-color: var(--dark); }

/* Log-in page. */
.landing-wrapper::before {
  opacity: 0.6;
  background-color: var(--accent) !important; }
.landing-window {
  border-radius: 4px !important;
  border: 1px solid var(--shadow);
  box-shadow: 0 8px 32px 0 var(--shadow) !important;
  background-color: var(--darker) !important; }
.landing-main + div {
  background-color: var(--darker) !important; }
  .landing-main + div img:not(:hover) {
    opacity: 0.3; }
  /* Text color. */
  .landing-main * {
    color: var(--light); }
  /* Reload QR code. */
  ._1MOym {
    background-color: var(--darker) !important; }
  ._3PxOr rect {
    fill: var(--dark) !important; }
  /* Fix QR code. */
  .landing-wrapper div[data-ref] {
    border-radius: 0;
    filter: contrast(150%) !important;
    outline: 4px solid white !important; }
  /* Loader. */
  #startup svg > circle {
    stroke: var(--lighter) !important; }
/* Logo colors. */
span._3PxOr svg path:nth-child(1) {
  fill: var(--dark) !important; }


/* Landing page. */
.app .iFKgT {
  border: none;
  background-color: var(--dark) !important; }
  /* Image. */
  .app .iFKgT [data-asset-intro-image] {
    max-width: 200px;
    max-height: 200px;
    border-radius: 50%;
    filter: opacity(0.75);
    transition: opacity 1s ease !important; }
  /* Text color. */
  .app .iFKgT * {
    color: var(--light); }
  /* Accent bar. */
  .app .iFKgT::after {
    border-top-color: var(--accent) !important; }
  /* Hide the text. */
  .iFKgT ._3mkas { font-size: 0px; }
  /** Theme note. */
  .app .iFKgT ._3mkas::before {
    display: block;
    margin-bottom: -20px;
    font-size: 16px;
    content: var(--message) var(--changes) !important;
  }
  /** Theme info. */
  .app .iFKgT ._3mkas::after {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 16px;
    content: var(--version) !important;
    border-top: 1px solid var(--darker);
  }

/* Left drawer. */
#app .app #side {
  background-color: var(--darker); }

  /* Chat list. */
  #side > header {
    background-color: var(--darker) !important; }

  /* Enable notifications. */
  #side ._2GB6m {
    background-color: var(--accent) !important; }
  /* Low battery. */
  #side ._2t3oV {
    background-color: var(--mred) !important; }
  /* Phone not connected. */
  #side ._1puWZ {
    background-color: var(--mred) !important; }
    /* Text color. */
    #side ._2GB6m *,
    #side ._1puWZ * {
      color: var(--lighter); }

  /* Global -> Search. */
  ._2HS9r {
    border-bottom: 0px solid var(--dark);
    background-color: var(--darker) !important;
    background-color: transparent !important; }
    /* Label background. */
    .ZP8RM label, .ZP8RM._19OGD {
      border: 0px solid var(--dark);
      background-color: var(--dark) !important; }
    /* Input element. */
    .ZP8RM label input {
      color: var(--light);
      background-color: transparent; }
    .ZP8RM::after,
    .ZP8RM > div::after {
      border-color: var(--darker) !important;
      background-color: var(--dark) !important; }

/* New group and group info buttons. */
._1w-mX, ._70TS5, ._11p3Q, .r7sRK, ._8-yzK {
  /* box-shadow: 0 0 8px -1px var(--shadow) !important; */
  color: var(--accent) !important;
  background-color: transparent !important; }
  /* Hide borders. */
  ._2DxRd {
    border-color: var(--darker) !important; }

/* Search results. */
#side ._1AKfk {
  color: var(--accent);
  background-color: var(--dark); }
  /* Matching results. */
  #side .matched-text {
    color: var(--accent) !important; }

  /* Contacts wrapper. */
  #pane-side, ._11GZy ._2UaNq {
    background-color: transparent !important; }
    /* Contacts. */
    ._2UaNq, ._11GZy ._26JG5 {
      transition: 200ms ease-in-out;
      background-color: transparent !important; }
      /* On event. */
      ._2UaNq._3mMX1, ._2UaNq:hover {
        background-color: var(--dark) !important; }
      /* Text color. */
      ._2UaNq *:not(#z) {
        color: var(--light) !important; }
      /* Borders. */
      ._2UaNq::after, ._2WP9Q {
        border-color: transparent !important; }
      /* Avatar wrapper background. */
      ._3RWII {
        box-shadow: 0 0 8px -1px var(--shadow) !important;
        background-color: transparent !important; }

/* New message indicator. */
#side .P6z4j {
  color: var(--lighter) !important;
  background-color: var(--accent) !important; }


/* Settings. */
._11GZy, ._1KDYa {
  background-color: var(--darker) !important; }
  /* Header color. */
  ._11GZy header, ._1KDYa header {
    min-height: 50px;
    height: auto;
    background-color: var(--darker) !important; }
    /* Send contacts. #42 */
    .WOXAS {
      background-color: transparent !important; }
    /* Footer. */
    ._21bWq, ._22oFl {
      background-color: var(--accent) !important; }
    /* Reset header height. */
    ._11GZy header > div:first-child {
      padding: 12px 0 !important;
      height: auto; }
    /* Reset header title in left/right drawers. */
    ._11GZy ._1xGbt {
      margin-top: 2px !important;
      font-size: 16px; }
  /* Transparent sections. */
  ._11GZy ._1CRb5, ._1KDYa ._2LSbZ {
    box-shadow: none !important;
    background-color: transparent !important; }
    /* Highlighted sections. */
    ._11GZy ._3hhmj ._1CkkN {
      background-color: var(--darker) !important; }
    /* Change profile picture. */
    ._11GZy .WX_XW, ._11GZy ._2Lbqu, ._1JS2G {
      background-color: rgba(0,0,0,0.5) !important; }
    /* Text color. */
    ._11GZy * {
      color: var(--light); }
  /* Input element. */
  ._5UNoc ._3hnO5 { border-color: var(--accent) !important; }
  /* Wrapper background. */
  ._3979j { background-color: transparent !important }
  /* Take a new profile picture. */
  ._2HyTU, ._22aOT {
    background-color: var(--darker) !important; }
  /* Confirm button. */
  ._2HyTU ._1g8sv, ._22aOT ._1g8sv {
    box-shadow: 0 2px 4px 0 var(--shadow) !important;
    background-color: var(--accent) !important; }
  /* Zoom in/out. */
  ._1DKwn {
    box-shadow: 0 2px 4px 0 var(--shadow) !important;
    background-color: var(--dark) !important; }

/* Option/select elements. */
select {
  color: var(--light);
  border-color: var(--accent); }
select option { background-color: var(--dark); }

  /* Archived chat image. */
  ._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,
    ._2fq0t ._2sNbV ._1CkkN:hover {
      background-color: var(--dark); }

  /* New group. */
  ._2fq0t ._39pS- {
    background-color: transparent !important; }
    /* Header. */
    ._2fq0t ._1AKfk {
      background-color: var(--darker) !important; }
      /* On event. */
      .k1feT ._2fq0t ._2EXPL._1f1zm,
      .k1feT ._2fq0t ._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; }

/** Context/dropdown menu. */
._2hHc6 {
  background-color: var(--darker) !important;
  box-shadow: 0 4px 16px 0 var(--shadow) !important; }
._2hHc6 li:hover, ._2hHc6 li:hover div {
  color: var(--accent) !important;
  background-color: var(--dark) !important; }
._2hHc6 div, ._1ArIP div {
  color: var(--light); }

/* Middle drawer. */
#main {
  background-color: var(--dark); }
  /* Fix parent-element. #43 */
  ._1ays2 {
    display: flex !important;
    flex-direction: column !important; }

  /* Main -> Group description. */
  ._3jzsh {
    background-color: var(--darker) !important; }
  /* Text colors. */
  ._3jzsh ._3GIEC, ._3jzsh ._6xQdq {
    color: var(--lighter) !important; }

  /* Jump to present button. */
  ._3KRbU {
    box-shadow: 0 4px 8px 2px var(--shadow) !important;
    background-color: var(--darker) !important; }
  /* Number of messages. */
  ._3KRbU > span > span {
    background-color: var(--accent) !important; }

  /* Header. */
  #main header {
    border: none;
    background-color: var(--dark); }
    /* Text color. */
    #main header ._1WBXd * {
      color: var(--light); }
  /* Header text color. #22 */
  #main > header > div span[title] {
    color: var(--light); }
  /* Header separator. */
  #main > header::after {
    border-bottom-color: var(--darker);
    background-color: transparent; }

/* Footer. */
#main footer {
  border-top: 1px solid var(--darker);
  background-color: var(--darker); }
  /* Input wrapper. */
  #main footer > div {
    color: var(--light);
    border: none;
    /* border-bottom: 2px solid var(--dark); */
    background-color: var(--dark); }
    /* Input element. */
    #main footer > div:nth-child(1) > div:nth-child(2) {
      border: none !important;
      color: var(--light);
      background-color: var(--darker) !important; }

/* Unknown contact. */
._2Pown {
  color: var(--light) !important;
  border-color: var(--darker) !important;
  background-color: var(--dark) !important;
  box-shadow: 0 -1px 0 0 inset var(--darker) !important; }
/* Buttons. */
._2ZZub {
  color: var(--lighter) !important;
  background-color: var(--darker) !important; }
._2ZZub:hover {
  color: var(--light) !important;
  box-shadow: 0 2px 4px 0 var(--shadow) !important; }

  /* Shared contact button colors. */
  .Ir_Ne {
    color: var(--accent) !important; }
  /* Shared contact text. */
  .AVd_p {
    color: var(--lighter) !important; }
  /* View contact. */
  ._1VwzF {
    background-color: transparent !important; }

/* Hide 'Type a message' once focused. */
._3FeAD.focused div[style] {
  color: transparent !important; }
  /* Placeholder text color. */
  ._3FeAD div[style] {
    transition: color 0.15s ease;
    color: var(--lighter) !important; }

/* Right drawer. */
/* .app ._3HZor ._2fq0t {
  background-color: var(--darker); } */
  /* Border-color. */
  .app ._3HZor {
    border-left-color: transparent !important; }
  /* Header. */
  .app ._3HZor header {
    background-color: var(--darker); }
    /* Fix header text vertical position. */
    .app ._3HZor ._1pYs5 {
      margin-top: 4px !important; }
    /* Text color. */
    .app ._3HZor header div {
      color: var(--light); }
    /* Mute/starred messages. */
    ._3_-Si + ._3_-Si ._2x2XP {
      border-color: var(--darker) !important; }

  /* Group info sections. */
  .app ._3HZor ._26JG5, .app ._3HZor ._2UaNq {
    /*box-shadow: 0 1px 3px shadow /**/
    box-shadow: none;
    background-color: transparent; }
    .app ._3HZor ._26JG5:hover {
      background-color: var(--dark) !important; }
    /* Fix borders. */
    .app ._3HZor ._27Ie2,
    .app ._3HZor ._26JG5::before {
      border-color: transparent !important; }
    /* User's name. */
    .app ._3HZor span {
      color: var(--light); }
    .app ._3HZor ._23Un5 {
      color: var(--mred); }
    /** Username colors in group chat. */
    .app [class*="color-"] span {
      color: inherit !important; }

    /* Group options. */
    .app ._3HZor ._1CRb5 ._2EXPL,
    .app ._3HZor ._1CRb5 ._1CkkN {
      transition: 200ms ease-in-out;
      background-color: transparent; }
      /* On event. */
      .app ._3HZor ._1CRb5 ._2EXPL._3xj48:hover,
      .app ._3HZor ._1CRb5 ._1CkkN:hover {
        background-color: var(--dark); }
      /* Text color. */
      .app ._3HZor ._1CRb5 ._2EXPL * {
        color: var(--light); }
      /* Admin color. */
      .app ._3HZor .FPZFa {
        border-color: var(--accent); }


/* Search messages. TODO: Apply this to all search elements. */
.a5vst, .a5vst .ZP8RM._19OGD /*, ._3HZor ._1iMEz._3sdhb*/ {
  background-color: var(--darker) !important; }
  /* Input wrapper. */
  .a5vst label {
    border: 0px solid var(--dark) !important;
    background-color: var(--dark) !important; }
  .a5vst .ZP8RM::after {
    border: none !important;
    background-color: var(--dark) !important; }
    .a5vst label input {
      background-color: transparent !important; }

/* Search messages body. */
.YAPQk {
  background-color: var(--darker) !important; }
  /* Matching results. */
  ._3HZor .matched-text {
    color: var(--accent) !important; }
  /* On event. */
  .YAPQk ._1f1zm > ._3j7s9,
  .YAPQk ._3j7s9:hover {
    background-color: var(--dark) !important; }

/* Search messages. */
#pane-side ._2EXPL {
  background-color: transparent !important; }

/* Starred messages. */
._1WMT2 .tail:not(.PJFFv) {
  background-color: var(--dark) !important; }
/* Borders. */
._1WMT2::before, ._1WMT2::after {
  display: none !important; }
  /* Selected message. */
  ._1WMT2._2nA3s,
  ._1WMT2:hover {
    transition: 200ms ease-in-out !important;
    background-color: var(--dark) !important; }
  /* Remove tails. */
  ._1WMT2 .tail-container {
    display: none !important; }
  /* Date text color. */
  ._1WMT2 ._2V2qB {
    color: var(--lighter) !important; }


/* Message info. */
#app .app > div:nth-child(2) ._2rGVQ {
  background-color: var(--dark) !important; }
  /* Doodle image. */
  #app .app > div:nth-child(2) [data-asset-chat-background="true"] {
    filter: invert(100%) opacity(0.8) !important; }
  /* Read by. */
  #app .app > div:nth-child(2) ._2AJf5,
  #app .app > div:nth-child(2) ._19xqi {
    box-shadow: none !important;
    background-color: transparent !important; }
  /* Read by text color. */
  #app .app > div:nth-child(2) ._2AJf5 span {
    color: var(--accent) !important; }
  /* Forwarded message info. #44 */
  ._1NZZN, ._3XHR- {
    border-color: var(--dark) !important;
    background-color: transparent !important;
    box-shadow: none !important; }
  ._1w7vp {
    color: var(--light) !important; }

/* Media/docs/links section. */
._27U_m, .yrOIH {
  border-bottom: 1px solid var(--dark);
  background-color: var(--darker) !important; }
/* Active indicator. */
._27U_m::before {
  background-color: var(--accent) !important; }
/* Text color. */
._26Nvu,
._27U_m .Y1iVg {
  color: var(--lighter) !important; }
/* Selected links. */
._27U_m .Y1iVg._3caqI {
  color: var(--light) !important; }
/* Selected image. */
._2Ji5m {
  border-color: var(--darker) !important; }

/** Media viewer. */
._1iNsf, ._2KgjI {
  background-color: transparent !important; }
  /* Pseudo-element background. */
  ._1iNsf::before, ._2KgjI::before {
    content: ""; position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: var(--dark);
    opacity: 0.8; z-index: -1; }
  /* Chevron/preloader background. */
  ._3yth3 {
    box-shadow: 0 2px 4px -1px var(--shadow) !important;
    background-color: var(--darker) !important; }

  /* Header. */
  ._1iNsf > div:first-child,
  ._2KgjI > div:first-child {
    box-shadow: 0 1px 0 0 var(--darker);
    background-color: var(--dark) !important; }
    /* Inner element. */
    ._1iNsf > div:first-child > div > div,
    ._2KgjI > div:first-child > div > div {
      background-color: transparent !important; }
      /* Text color. */
      ._1iNsf > div:first-child > div > div *,
      ._2KgjI > div:first-child > div > div * {
        color: var(--light); }

  /* Footer. */
  ._2AP3i {
    border-color: var(--darker) !important;
    background-color: var(--dark) !important; }
    /* Selected image. */
    ._2AP3i .cJP5q {
      border: none !important;
      transform: scale(1) !important;
      outline: 3px solid var(--accent) !important }
      ._2AP3i ._1LdNS:hover:not(.cJP5q):not(#spec) {
        outline: 3px solid var(--accent) !important; }

/* Highlight message bubbles. #29 */
div.message-in.velocity-animating,
div.message-out.velocity-animating {
  background-color: var(--accent) !important }
.tail.velocity-animating > .tail-container {
  border-top-color: var(--accent) !important }

  ._2v02G {
    color: var(--lighter) !important; }

  /* Bubble colors. #49 */
  .message-in:not(.a81-s) > div, .message-out:not(.a81-s) > div {
    background-color: var(--darker) !important; }

  /* Message text color. */
  .message-in .selectable-text,
  .message-out .selectable-text,
  .quoted-mention,
  ._1upWv {
    color: var(--light) !important; }

  /* Voice messages. */
  ::-moz-range-thumb { background-color: var(--accent) !important }
  ::-moz-range-track { background-color: var(--lighter) !important }
  ._7sUPO { background-color: var(--accent) !important }
  ._1FWQp { color: var(--light) !important }

  /* Use accent color for links. #20 */
  a[href].selectable-text {
    color: var(--accent) !important; }

  /* Forwarded message. */
  ._15aTv {
    color: var(--lighter) !important; }

  /* Read more. */
  ._2VdJh { color: var(--accent) !important }

  /* Deleted message. */
  ._3uHCS { color: var(--lighter) !important }
  span[class][data-icon="recalled-out"] svg path { fill: red !important }

  /* Phone numbers of users that aren't your contacts. */
  #main ._1F9Ap {
    color: var(--lighter) !important; }

  /* Mentions. */
  .matched-mention, .matched-mention .at-symbol {
    color: var(--accent) !important; }

    /* Message meta text color. */
    [class*="message-"] div > div:last-child span {
      color: var(--light); }

  /* Image/gif/video meta wrapper. */
  .KYpDv ._1DZAH {
    bottom: 8px;
    padding: 2px 5px;
    border-radius: 4px;
    background-color: var(--shadow); }
    /* Text color. */
    .KYpDv ._1DZAH ._3EFt_ {
      margin-top: 0px;
      color: var(--lighter); }

    /* Message options for images. */
    ._3EQsG._1eJVc {
      background: none !important; }
    /* Smooth transition. */
    .message span:last-child div {
      transition: 50ms ease-in-out !important; }

  /* Typing... */
  span._2ZAIy {
    color: var(--accent) !important; }

  /* System messages. */
  .a7otO {
    box-shadow: 0 2px 8px 0px var(--shadow) !important;
    border-bottom: 3px solid var(--shadow) !important;
    background-color: var(--darker) !important; }
    /* Text color and shadows. */
    .a7otO * {
      text-shadow: none !important;
      color: var(--lighter) !important; }
    /* New message. */
    #main ._3Xx0y {
      border: none !important;
      background-color: var(--darker) !important; }
      /* X unread messages. */
      #main ._3Xx0y span {
        box-shadow: 0 0 8px 0 var(--shadow) !important;
        color: var(--light) !important;
        background-color: var(--dark) !important; }

  /* Loader. */
  ._2sOZc {
    box-shadow: 0 2px 4px -1px var(--shadow) !important;
    background-color: var(--darker) !important; }

  /* Document embeds. */
  ._3a29n, [title *= 'Download'] > div {
    background-color: var(--dark) !important; }

  /* Embeds description */
  .HNuTV {
    background-color: var(--dark) !important; }

  /* Link embeds. */
  ._3qblR, ._1SsXF {
    box-shadow: 0 0 0 1px var(--dark) !important;
    background-color: var(--dark) !important; }

  /* Thumbnail. */
  ._3_nIn {
    background-color: var(--darker) !important; }


/* Reply section. (= */
footer ._1ebw2 {
  box-shadow: 0 0px 8px 0 var(--darker) !important;
  background-color: var(--darker) !important; }
/* Fix margins. */
footer ._1ebw2 > div:first-child {
  margin: 0 0 5px 10px !important;
  background-color: transparent !important; }
/* Reply content. */
footer ._1ebw2 > div:first-child > div {
  background-color: var(--dark) !important; }
/* Close button. */
footer ._1ebw2 > div:last-child {
  position: relative;
  margin: 0 8px 5px 8px !important;
  background-color: transparent !important; }
/* Make the button larger. */
footer ._1ebw2 > div:last-child > div svg {
  padding: 18px;
  border-radius: 6px;
  background-color: var(--dark); }

/* Mention group members. */
._2j-wI, .XSeqj {
  color: var(--light);
  border-left: none !important;
  background-color: var(--darker) !important; }
/* Wrapper. */
._2j-wI .XSeqj {
  transition: 300ms ease-in-out !important;
  background-color: transparent !important; }
/* Active. */
._2j-wI .XSeqj._1Yz8K,
._2j-wI .XSeqj:hover {
  background-color: var(--accent) !important; }


/* Select messages. */
#main ._2AqZl {
  background-color: var(--shadow); }
  /* Hover over messages. */
  #main .qTFAl {
    transition: 0.15s ease !important; }
    /* Selected message. */
    #main .qTFAl:hover, #main .qTFAl._3Z2tD {
      background-color: var(--shadow) !important; }
  /* Selected icon. */
  ._15wNI {
    border-color: var(--accent) !important;
    background-color: var(--accent) !important; }
    /* Checkmark. */
    ._15wNI ._1ygtt {
      border-bottom-color: var(--light);
      border-right-color: var(--light); }
  /* Footer/control/options. */
  #main ._1hhkM {
    background-color: var(--darker); }


/* Bubble tails -- experimental. */
.tail .tail-container {
  width: 0px !important;
  height: 10px !important;
  z-index: 0 !important;
  border-top: 12px solid var(--darker);
  background: none !important; }
  .tail.message-in .tail-container {
    left: -10px !important; top: 0px;
    border-left: 10px solid transparent;
    border-radius: 5px 0 0 0; }
  .tail.message-out .tail-container {
    right: -10px !important; top: 0px;
    border-right: 10px solid transparent;
    border-radius: 0 5px 0 0; }

  /* Disable tails everywhere. */
  .tail-container {
    display: none !important; }
  .tail {
    border-radius: 7.5px !important; }

  /* Disable tails everywhere except in chat. */
  .starred-msg-wrapper .tail-container,
  .message-gallery .tail-container,
  .MS-DH .tail-container {
    display: none !important; }
    /* Rounded corners. */
    .message-gallery.tail-override-left,
    .MS-DH .tail-override-left {
      border-radius: 7.5px !important; }

/** Stickers. */
._1rK-b {
  background: none !important; }
/* Sender. */
._3Mf7Z {
  background-color: var(--darker) !important; }
/* Time/status. */
._3qAvH {
  background-color: var(--darker) !important; }
._3qAvH * {
  color: var(--light) !important; }

/* Message options. */
._15CAo {
  background: linear-gradient(90deg, transparent, var(--darker) 40%) !important;
}
/* Reset sticker menu background. */
.a81-s > div + span > div { background: none !important }
/* Context menu buttons. */
[data-js-context-icon='true'] {
  background-image: none !important;
  background: none !important; }
[data-js-context-icon='true'] + div { background: var(--darker) !important }

/* Emoji/gif/stickers menu. */
.QChXd, ._20KNO, .RxbUw, ._2PpWQ > div {
  background-color: var(--dark) !important; }
  /* Temporary fix for emoji container. */
  #main footer > div:nth-child(2) > div {
    border: 0; }
  /* Nib. */
  .iqJMX {
    background-color: var(--dark) !important; }
  /* Emoji tabs. */
  ._2avTY {
    background: var(--darker) !important; }
  /* Tab indicator. */
  ._2avTY .Orl3a,
  ._1Wbpa {
    background-color: var(--accent) !important; }
  /* Active button. */
  ._1oNFt.-XQxp path {
    fill: var(--accent) !important; }

  /* Search emojis. */
  ._2Qm0c, ._2Qm0c label {
    box-shadow: none !important;
    background-color: var(--dark) !important; }
    /* Text color. */
    ._2Qm0c input {
      color: var(--light) !important; }

  /* Gif preloader background. */
  ._2x9yi {
    /* border: 2px dashed ; */
    background-color: var(--darker) !important; }

    /* 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 {
  opacity: var(--emojiOpacity);
  transition: transform 200ms cubic-bezier(0.59, 0.57, 0.39, 1.04);
  clip-path: circle(47%) !important; }
  /* Selected emoji. */
  .emojik:focus, .emojik:hover, .emojik.selected {
    box-shadow: none !important;
    opacity: 1;
    transform: scale(1.15); }

  /* Emoji quick selection. */
  ._2mlOb {
    border: 0 !important;
    border-bottom: 1px solid var(--darker) !important;
    background-color: var(--darker) !important; }
  /* Emoji race color popup. */
  ._1gFYk {
    background-color: var(--dark) !important; }
    /* Separator. */
    ._1gFYk ul li:first-child {
      border-right: 1px solid var(--darker) !important; }
    /* Emoji menu triangle. */
    ._1gFYk .iqJMX {
      background-color: var(--dark) !important; }


/* Backdrop. */
._3Fq9Y, #startup, #initial_startup {
  background-color: var(--dark) !important; }
  /* Modal. */
  ._3Fq9Y ._3RiLE,
  ._3gUiM ._2dA13 ._1CnF3,
  ._2dA13 ._18wuJ, ._2dA13 .IuYNx {
    box-shadow: 0 0 0 1px var(--darker), 0 8px 16px 0px var(--shadow) !important;
    background-color: var(--darker) !important; }
    /* Selected contact. */
    ._3gUiM ._2EXPL._1f1zm,
    ._3gUiM ._2EXPL:hover,
    ._2EXPL._3ntaf:hover {
      background-color: var(--dark) !important; }
    /* Text color. */
    ._3Fq9Y ._3RiLE *,
    ._3gUiM ._1CnF3 * {
      color: var(--light); }
    /* Header/footer. */
    .XOIaT {
      background-color: var(--dark) !important; }
    /* Empty element below search bar. */
    ._2fq0t span._3fOoY {
      display: none !important; }


/* Accent buttons. */
._3PQ7V {
  color: var(--lighter) !important;
  background-color: var(--accent) !important; }
._3PQ7V:hover {
  opacity: 0.8; }
/* Link buttons. */
._23_1v:hover {
  box-shadow: none !important;
  color: var(--accent) !important;
  background-color: transparent !important; }
/* Muted checkbox color. */
._1VD7W {
  border-color: var(--accent);
  background-color: var(--accent); }
/* Buttons. */
.PNlAR:hover, ._1WZqU:hover {
  background-color: var(--dark) !important; }

/* Drop items. (-: */
.drag-drop, ._2n-96 {
  background-color: var(--dark) !important; }
  /* Footer. */
  .NeQRT {
    background-color: var(--darker) !important; }
  /* Border. */
  ._2n-96 ._3L-be {
    border: 5px dashed var(--accent) !important;
    color: var(--light) !important; }

  /* Add file icon. */
  .GpvML, ._1ypOz, ._3fktq, ._1g8sv {
    background-color: var(--dark) !important;
    box-shadow: 0 2px 4px var(--shadow) !important; }
    /* Border. */
    ._1gcLL::after {
      background-color: var(--accent) !important; }

  /* Accent border. */
  .CzI8E, ._31WRs ._1DTd4, ._2Fvnm ._3ogpF {
    border-bottom-color: var(--accent) !important; }
  /* Text color. */
  ._7HWvs, .A_Kh_ {
    color: var(--light) !important; }

/** Status area! */
.app-wrapper-web ._2dLx9 {
  background-color: transparent !important; }
/* Pseudo-element background. */
.app-wrapper-web ._2dLx9::before {
  content: ""; position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: var(--dark);
  opacity: 0.8; z-index: -1; }
  /* Status icon. */
  span[data-icon*="status-v3"] > svg > path:first-child {
    opacity: 0.55 !important; }
  /* Left hand side. */
  ._2dLx9 .IMn_C { background-color: var(--darker) !important; }
  /* Text color. */
  .IMn_C span { color: var(--light) !important; }
  .qlhJH hr { color: var(--dark) !important; }
  /* Right hand side. */
  ._2dLx9 ._3MBzN { background-color: var(--dark) !important; }
  /* Text color. */
  ._2dLx9 ._3MBzN div { color: var(--lighter) !important; }
  /* Reply to status. */
  .QRsOy { background-color: var(--dark) !important; }
  /* Input bar. */
  ._3FeAD._2nW8k { background-color: var(--dark) !important; }

/* Remove weird iframes. */
object { display: none !important; }

/* Global icon color. */
span[data-icon^="business-"] > svg path,
span:not([data-icon="image"]) > svg > path {
  transition: 200ms ease;
  fill: var(--icon) !important; }
  /* On event. */
  span:not([data-icon="image"]):hover > svg > path {
    /* fill: var(--accent) !important; */
    opacity: 0.3 !important; }

/* Upload files. */
.Ijb1Q::after { box-shadow: 0 4px 8px 2px var(--shadow) !important; }

/* Default profile picture background. */
span[data-icon^="default-"] svg > path:first-child {
  fill: var(--dark) !important; }

span[data-icon^="default-"] svg path:last-child {
  opacity: 0.7;
  fill: var(--icon) !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,
span[data-icon="status-v3-unread"] > svg > path:last-child {
  fill: var(--accent) !important;
  opacity: 1 !important; }

/* Misc icons fix. */
span[data-icon^="chevron-"] 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. */
._3CSsZ > svg > path:first-child {
  fill: var(--accent) !important; }
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: var(--mred) !important; }

/* Audio message. */
span[data-icon="audio-file"] svg path {
  fill: rgba(255, 173, 31, 0.8) !important; }
  /* Audio length bar. */
  ._22cMG.fS1bA .nDKsM {
    background-color: var(--accent) !important; }
    /* Slider thumb. */
  input[type=range]::-webkit-slider-thumb {
    cursor: pointer;
    background: var(--accent) !important; }
  /* Audio length. */
  ._3HwRC, ._1lxsr {
    color: var(--light) !important; }

/* Rounded buttons. */
span svg > path[fill="#00BFA5"] {
  fill: var(--accent) !important; }

/* Disable background image on small resolutions. */
@media screen and (max-width: 1441px) {
  ._1FKgS::after {
    display: none !important;
  }
}

@media screen and (min-width: 1441px) {
  /* Animation. */
  html[dir=ltr] ._3dqpi {
    /* display: none !important; */
    animation: _104Un 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.38); }

  /* App wrapper. */
  #app .app {
    border-radius: 8px;
    box-shadow: 0 4px 24px -2px var(--shadow); }
}

/* Compact mode. */
@media screen and (max-height: 500px) {
  /* App height reset. */
  #app > div > .app { min-height: auto; }
}
@media screen and (max-width:720px) {

  /* Fix header width hiding icons. */
  #side > header { min-width: 240px; }
  /* Hide notifications. */
  #side > header + span { display: none }

  /* Contacts */
  .app > div:nth-child(3) {
    transition: 0;
    flex: 0 0 75px !important; }
  .app > div:nth-child(3):hover {
    transition-delay: 0.99s;
    flex: 0 0 40% !important; }
  /* Search bar width. */
  .ZP8RM:not(._19OGD) label {
    padding: 0px; }
  /* Contact list reset when right is active. */
  .app.three > div:nth-child(3) {
    flex: 0 0 75px !important;
    margin-left: -75px !important; }

  /* Chat section. */
  ._1Iexl {
    flex: 0 0 65% !important; }

  /* On hover or active sub-menus. */
  .app.two > .k1feT:hover,
  .MZIyP .k1feT {
    transition-delay: 1s !important;
    /* TODO: Adjust panel width. */
    flex: 0 0 30% !important; }

  /* Info flexbox. */
  .three ._3HZor {
    width: calc(100% - 75px) !important;
    left: 75px !important; }

  /* Chat flexbox. */
  .two > ._1Iexl {
    margin: 0 !important;
    flex: 0 0 calc(100% - 75px) !important; }

  /* Search contacts. */
  .two .k1feT:not(:hover) ._2MSJr {
    padding: 0; }

  /* On hover. */
  .two .k1feT:hover ._2MSJr {
    transition-delay: 1s !important; }

  /** Hack for positioning unread counter. */
  #side:not(:hover) ._3j7s9 ._1AwDx ._3Bxar span > div {
    z-index: 101;
    position: absolute; }
  /* ? Unread counter. */
  #side:not(:hover) div > .OUeyt {
    height: 18px;
    padding: 0 5px 0 5px;
    margin: -5px 0 0 -35px;
    background-color: var(--dark) !important;
    box-shadow: 0 0 0 3px var(--darker) !important; }
  /* On event. */
  /*#side:hover div > .OUeyt {
    background-color: var(--dark) !important;
    box-shadow: 0 0 0 3px var(--darker) !important; }*/

  /* ? Message status. */
  .two .k1feT ._3j7s9 ._1VfKB {
    z-index: 101;
    position: absolute;
    margin-left: -68px;
    margin-top: 5px;
    border-radius: 50%;
    background-color: var(--dark);
    box-shadow: 0 0 0 3px var(--darker); }
  /* Background on event. */
  .two .k1feT ._2EXPL:hover ._1VfKB,
  .two .k1feT ._2EXPL._1f1zm ._1VfKB {
    background-color: var(--darker);
    box-shadow: 0 0 0 3px var(--dark) !important; }

  /** Icon size. */
  .two .k1feT ._3j7s9 ._1VfKB span > svg {
    padding: 2px;
    height: 14px !important;
    width: 14px !important; }

  /* Hide all icons except new messages. */
  .two .k1feT ._15G96 span:not(.OUeyt),
  .two .k1feT .ZR5SB {
    display: none !important; }
}
@media screen and (max-width: 720px) {
  /* Width overflow fix. */
  ._3dqpi {
    min-width: 100%; }

  /* On hover or active sub-menus. */
  .app.two > .k1feT:hover,
  .MZIyP .k1feT {
    transition-delay: 1s !important;
    flex: 0 0 40% !important; }
}


/* Highlight message bubbles. #29 */
div.message-in.velocity-animating > div > div,
div.message-out.velocity-animating > div > div {
  background-color: var(--accent) !important }
.velocity-animating > .tail > .tail-container {
  border-top-color: var(--accent) !important }

/* Bubble colors. #49 #54 */
.message-in > div:not(.a81-s) > div,
.message-out > div:not(.a81-s) > div {
  background-color: var(--darker) !important; 
}
  ._2v02G {
    color: var(--lighter) !important; }

  /* Message text color. */
  .message-in .selectable-text,
  .message-out .selectable-text,
  .quoted-mention,
  ._1upWv {
    color: var(--light) !important; }