WA_Dark_UI.user.css

/* See https://satya164.github.io/numix/#branding for Colour palette */

/* Remove intro image, enable desktop notifications, bubble corner and small line after chat header */
.butterbar-notification, .message:before, header.pane-chat-header:after {
  display: none !important;
}


/* Move sidebar scrollbar to the left */

#pane-side {
  direction: rtl !important;
}

.chat {
  direction: ltr !important;
}


/* icons color invert*/

.icon {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

.btn-close-drawer, .icon-msg-dblcheck {
  filter: invert(0%);
  -webkit-filter: invert(0%);
}


/* Background */

.app-wrapper, #startup, #wrapper, #wrapper:before {
  background: #262222 !important;
}


/* Login page */

#window, #platforms {
  background: #333333 !important;
}

#window *, #platforms * {
  color: #dedede !important;
}

.qrcode {
  border: 16px solid #f9f9f9 !important;
}


/* Texts */

.chat-title, .action .button-contact {
  color: #F9F9F9 !important;
  font-style: bold;
}

.header-title, .header-secondary {
  color: #F9F9F9 !important;
}

.chat-status, .message-text, .msg-search-notfound, .well {
  color: #dedede !important;
}

.chat-time, .message-datetime, .meta-audio {
  color: #dedede !important;
}

.message-datetime {
  filter: grayscale(100%);
}

/* Checkboxes */

.checkbox.unchecked {
  background: #f9f9f9 !important;
}

.checkbox.checked {
  background: #d64937 !important;
}


/***********/


/* Sidebar */


/***********/

.input-main, .placeholder {
  color: #dedede !important;
  padding-right: 20px !important;
}

.btn-round {
  background: #d64937 !important;
}


/* Top part */

.pane-list-header, .unread-count {
  background: #333333 !important;
}

.new-group-search, .new-group-contacts, .drawer-section-main, .block-compose {
  background: #333333;
}


/* Search bar and right sidebar */

.subheader-search, .subheader-search:after, #pane-side, .pane-preview {
  background: #333333 !important;
}

.cont-input-search, .input-search, .animate-enter1 {
  background: #626262 !important;
  border-radius: 0px;
  width: calc(100% - 24px);
}


/* Chats list */

.chat, .infinite-list-item, .list-title {
  background: #333333 !important;
}

.chat:after {
  border-bottom: 1px solid #444 !important;
}

.active.chat {
  background: #D64937 !important;
}

.hover.chat {
  background: #626262 !important;
}

.drawer-header-popup, .drawer-header, .drawer-editable {
  background: #2d2d2d;
}

.list-action:hover {
  background: #626262;
}


/* Profile & status */

header.drawer-header-small {
  background: #D64937 !important;
  color: #F9F9F9 !important;
}

.drawer-body, .animate-enter2, .animate-enter, .drawer-section-body.chatlist {
  background: #333 !important;
}

.input {
  color: #f9f9f9 !important;
}

.context-media {
  width: 30px;
  height: 30px;
}

/**************/


/* Intro page */


/**************/

/*.pane {
  background: #444 !important;
}*/

.pane-intro {
  background: #2d2d2d !important;
}

.pane-intro:after {
  border-top: 6px solid #333333 !important;
}

.link-preview-body {
  background: #d64937 !important;
}

.link-preview-title, .link-preview-description, .link-preview-source {
  color: #F9F9F9 !important;
}


/* Cut white parts from image */

.intro-image {
  border-radius: 50%!important;
  height: 383px !important;
  width: 383px !important;
}

.selectable-text {
  color: #f9f9f9;
}

.message-text a {
  color: #d64937;
}

.message-text strong {
  color: inherit !important;
}


/* Texts */

h1 {
  color: #F9F9F9 !important;
}

.intro-text {
  color: #d64937 !important;
}


/*************/


/* Chat page */


/*************/


/* Top bar */

header.pane-chat-header {
  background: #333333 !important;
}


/* Background */

.pane-body, .pane-chat-tile, .msg-unread {
  background: #2d2d2d !important;
}


/* Chat bubble */


.message-in .tail-container {
  filter: grayscale(100%) brightness(0.4);
}

.message-out .tail-container {
  filter: grayscale(100%) brightness(0.29);
}

.message-in, .context-in {
  background: #626262 !important;
}

.message-out, .context-out {
  background: #444444 !important;
}

.tail {
  margin-top: 1.5px !important;
}

.message-system-body {
  background: #d64937 !important;
  color: #F9F9F9 !important;
  font-weight: bold !important;
  text-shadow: none !important;
}

.msg-unread-body {
  font-weight: bold !important;
}


/* Quoted message over compose panel */

.compose-popup-panel, .compose-popup-panel .btn-background {
    background: #414141 !important
}


/* Remove background from down arrow */

.message .btn-context, .message .btn-context:after {
  background: none !important;
}

.pane-header, .pane-footer {
  background: #333333 !important;
}

.input-container {
  background: #333333 !important;
}


/* Emojis */

button.menu-item {
  background: #626262 !important;
  transition-duration: .25s !important;
}

button.menu-item:hover {
  background: #626262 !important;
}

.menu-tabs-marker {
  background: #d64937 !important;
}

.emoji-panel-body {
  background: #333333 !important;
}

.emojik {
  border-radius: 4px !important;
  margin: 6px 4px !important;
}


/**********/


/* Others */


/**********/


/* Dropdowns */

.dropdown {
  background: #333333 !important;
}

li .ellipsify {
  color: #F9F9F9 !important;
}

li .ellipsify:hover {
  background: #626262 !important;
}


/* Popups */

.popup {
  background: #262222 !important;
}

.popup-title, .btn-plain {
  color: #f9f9f9 !important;
}

.popup-contents {
  color: #dedede !important;
}

.select * {
  color: #d64937 !important;
}

.popup-controls-item {
  background: #d64937 !important;
}

.backdrop {
  background: rgba(15, 15, 15, 0.65) !important;
}


/*  Image viewer */

.media-panel-header, .media-content {
  background: #333333 !important;
}

.chat-main {
  color: #d64937 !important;
}


/* Chat FAB (floating action button) */

.incoming-msgs {
  background: #D64937 !important;
}


/* NO BORDERS! */

* {
  border: none !important;
}