Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save masterchop/7de4bbe85c1a0e66cacff7932574ea12 to your computer and use it in GitHub Desktop.
Save masterchop/7de4bbe85c1a0e66cacff7932574ea12 to your computer and use it in GitHub Desktop.
Using this script with TamperMonkey you can have your whatsapp web turned into an un-noticeable dark theme app
// ==UserScript==
// @name Dark Theme Whatsapp Web
// @namespace http://userstyles.org
// @description My custom theme for Whatsapp Web. With orange and dark shades.
// @author David Jiménez
// @homepage https://userstyles.org/styles/109575
// @include https://web.whatsapp.com/
// @run-at document-start
// @version 0.20170512183823
// ==/UserScript==
(function() {var css = [
".tail-container {",
" display: none",
"}",
"span.message-datetime {",
" color: dimgray",
"}",
"emojitext {",
" color: gray",
"}",
"message-text quoted-msg-text {",
" color: gray",
"}",
"span.emojitext {",
" color: gray",
"}",
".link-preview-body {",
" background-color: #181818",
"}",
".bubble {",
" background-color: #181818",
"}",
".intro-image {",
" background-image: url(https://lh6.googleusercontent.com/-ri8vZ-Dx2TQ/VMDcZLCLNcI/AAAAAAAACGc/vnQqkc2fr9A/w356-h355-no/intro-connection.png)!important;",
"}",
".pane-chat-body,",
".pane-intro,",
".chatlist .chat,",
".chatlist .location,",
"#startup,",
".pane-list-body {",
" background: #181818!important;",
"}",
".app-wrapper::before,",
".app-wrapper {",
" background: #0a0a0a !important;",
"}",
"::-webkit-scrollbar-track {",
" background: #383838 !important;",
"}",
"::-webkit-scrollbar-thumb {",
" background-color: #484848 !important;",
"}",
".drawer-body::-webkit-scrollbar {",
" width: 10px!important;",
"}",
".pane-intro:after {",
" border-top: 6px solid orange;",
"}",
".app.three {",
" background: black;",
"}",
".drawer-body .drawer-section-photo {",
" background: none!important;",
" margin-top: -20px;",
" margin-bottom: -20px;",
"}",
".chatlist .active.location,",
".chatlist .chat.active {",
" border-bottom: 2px solid #ff8000 !important;",
"}",
".chatlist .active.location:hover,",
".chatlist .chat.active:hover {",
" border-bottom: 2px solid #383838 !important;",
"}",
".chatlist .active.location:hover:before,",
".chatlist .chat.active:hover:before,",
".chatlist .active.location:before,",
".chatlist .chat.active:before {",
" background-color: black !important;",
"}",
".chatlist .chat:hover,",
".chatlist .location:hover {",
" border-bottom: 1px solid #333 !important;",
"}",
".chatlist .chat:hover:before,",
".chatlist .location:hover:before,",
".infinite-list.chatlist {",
" background-color: #282828 !important;",
"}",
".dropdown {",
" box-shadow: 0px !important;",
" background-color: #222 !important;",
"}",
".dropdown .menu-item a:hover {",
" background-color: #333;",
" color: white;",
"}",
".dropdown .menu-item a {",
" color: white;",
"}",
".pane-chat-header,",
".pane-header,",
".drawer-body {",
" background-color: black !important;",
"}",
".chatlist .chat:hover,",
".chatlist .location:hover,",
".infinite-list-item:hover {",
" background: #181818 !important;",
"}",
".active.location,",
".chat.active:hover,",
".active.location:hover,",
".chat.active {",
" background: #0a0a0a !important;",
"}",
".infinite-list-item .list-title {",
" background-color: black!important;",
"}",
".subheader-search.active {",
" border: none!important;",
" box-shadow: none!important;",
"}",
".chat-title span,",
".chat-time,",
".drawer-section-title,",
".msg-search-notfound {",
" color: white!important;",
"}",
".block-compose,",
".drawer-section,",
".drawer-section-expand {",
" background-color: #616161!important;",
"}",
".input-container .input {",
" color: #f5f5f5!important;",
"}",
".menu-tabs-emoji {",
" background-color: #A0C8CD!important;",
"}",
".media-panel {",
" background-color: rgba(35, 35, 35, 0.95)!important;",
"}",
".msg-unread-body,",
".media-panel-header {",
" background-color: #9E9C9C!important;",
"}",
".infinite-list-item .list-title {",
" border-bottom: 1px solid #616161!important;",
"}",
".chatlist .chat:after,",
".chatlist .list-title:after {",
" border-bottom: none!important;",
"}",
".chat:hover:not(.active),",
".location:hover:not(.active) {",
" background-color: inherit!important;",
"}",
".block-compose .input-container,",
".cont-input-search,",
".input-search,",
".pane-subheader {",
" background-color: #282828 !important;",
" color: white;",
"}",
".cont-input-search {",
" border: 1px solid #0a0a0a;",
"}",
".drawer-section-title .col-side {",
" color: black!important;",
"}",
".cont-input-search .input-placeholder,",
".chat-body .ellipsify,",
".chatlist .is-unread .chat-status,",
".chatlist .is-unread .header-secondary,",
".chatlist .is-unread .location-secondary,",
".chatlist .unread .chat-status,",
".chatlist .unread .header-secondary,",
".chatlist .unread .location-secondary,",
".drawer-value {",
" color: #c2c2c2 !important;",
"}",
".infinite-list-item .ellipsify,",
".infinite-list-item .emojitext {",
" color: #ff8000;",
"}",
".pane-list-header,",
".pane-header,",
".drawer-header {",
" background-color: #222 !important;",
"}",
".menu-tabs-emoji {",
" background-color: #333!important;",
"}",
".input-container .input {",
" color: #f5f5f5!important;",
" background: #222 !important;",
"}",
".emoji-search-row-input>div {",
" background: #222 !important;",
"}",
".block-compose,",
".drawer-section,",
".drawer-section-expand {",
" background-color: #333!important;",
"}",
".block-compose .input-container,",
".cont-input-search,",
".input-search,",
".pane-subheader {",
" background-color: #222!important;",
" color: white;",
"}",
".block-compose .input-container {",
" border-color: #444;",
"}",
".intro {",
" background-color: #222;",
"}",
".chat-status,",
".header-secondary {",
" color: #fafafa !important;",
"}",
".pane-chat-footer {",
"border-left: 0px;",
"}",
"",
".chatlist .chat-body, .chatlist .header-body {",
" border-top: 0px;",
"}"
].join("\n");
if (typeof GM_addStyle != "undefined") {
GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
addStyle(css);
} else {
var node = document.createElement("style");
node.type = "text/css";
node.appendChild(document.createTextNode(css));
var heads = document.getElementsByTagName("head");
if (heads.length > 0) {
heads[0].appendChild(node);
} else {
// no head yet, stick it whereever
document.documentElement.appendChild(node);
}
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment