Skip to content

Instantly share code, notes, and snippets.

@thienandangthanh

thienandangthanh/zalo-web-dark-mode.js

Created June 14, 2021 15:18
Show Gist options
  • Save thienandangthanh/d04eddd99ba17bdb537dca9fddbf4c32 to your computer and use it in GitHub Desktop.
Save thienandangthanh/d04eddd99ba17bdb537dca9fddbf4c32 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
zalo-web-dark-mode.js
// ==UserScript==
// @name Zalo - Dark Mode
// @namespace http://userstyles.org
// @description For chat.zalo.me
// @author Thien An Dang Thanh
// @homepage
// @include http://chat.zalo.me/*
// @include https://chat.zalo.me/*
// @include http://*.chat.zalo.me/*
// @include https://*.chat.zalo.me/*
// @run-at document-start
// @version
// ==/UserScript==
(function () {
var css = [
" #container {",
" background: #1d1d1d !important;",
" }",
" header {",
" background-color: #212121 !important;",
" color: white;",
" }",
" .title.header-title, .title.header-title.group-title > .content{",
" color: white;",
" }",
" .subtitle__label{",
" color: white !important;",
" background: white !important;",
" }",
" .subtitle.header-subtitle {",
" background-color: #212121 !important;",
" box-shadow: 0px 0px 13px 1px #212121 !important;",
" -moz-box-shadow: 0px 0px 13px 1px #212121 !important;",
" -webkit-box-shadow: 0px 0px 13px 1px #212121 !important;",
" }",
" .chat-input__content {",
" border-top: 1px solid #000000 !important;",
" background-color: #212121 !important;",
" color: white !important;",
" }",
" .chat-input__content.hightlight {",
" border-top: 1px solid #000000 !important;",
" background-color: #424242 !important;",
" }",
" .chat-input__tools {",
" background-color: #1d1d1d !important;",
" }",
" .chat-info__header {",
" background: #212121 !important;",
" color: #ffffff !important;",
" }",
" .chat-info__header__title {",
" color: #f5f5f5 !important;",
" }",
" .chat-info-general__section {",
" background: #212121 !important;",
" color: white !important;",
" }",
" .chat-info__body {",
" background: #212121 !important;",
" }",
" .chat-info-general__section--border {",
" border-top: 9px solid #212121 !important;",
" }",
" .chat-onboard {",
" height: calc(100vh - 30px);",
" color: var(--white-300);",
" background: var(--dark-grey-600);",
" }",
" #messageViewContainer {",
" flex: 1 1 auto;",
" transition: .2s ease-out;",
" background: var(--dark-grey-500);",
" }",
// "#chatOnboard > div {",
// "width: 415px;",
// "text-align: center;",
// "color: var(--neutral-700) !important;",
// "margin-bottom: 50px;",
// "}",
" #main-tab {",
" background-image: linear-gradient(#305e73, #000000) !important;",
" border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;",
" }",
" #user-name {",
" background-color: #212121 !important;",
" color: white !important;",
" }",
" #contact-search {",
" background-color: #212121 !important;",
" }",
" .conv-container {",
" background:#212121 !important;",
" color: white !important;",
" }",
" .item.pinned {",
" background: #212121 !important;",
" }",
" .item-title-name {",
" color: white !important;",
" }",
" .item {",
" background: #212121 !important;",
" }",
" .item.selected, .item.chat-message.first-selected, .item.chat-message.last-selected {",
" background-color: #171717 !important;",
" }",
" .card, .card-title, .card-sender-name{",
" background: #212121 !important;",
" color: white !important;",
" }",
" .file-message__content-container {",
" display: flex;",
" width: 100%;",
" font-size: 13px;",
" color: white !important;",
" }",
" .card.me {",
" background-color: #255eb3 !important;",
" }",
" .conv-label-title {",
" color: white !important;",
" }",
" .msg-item:not(.pinned):first-child, .msg-item.pinned + .msg-item:not(.pinned) {",
" border-top: 1px solid #3a3a3a !important;",
" }",
" .suggest-friend-item:hover {",
" background-color: #000 !important;",
" }",
" .suggest-friend-content > .sgf-name {",
" color: white !important;",
" }",
" .data-list__label {",
" border-top: 1px solid rgb(70, 70, 70) !important;",
" }",
" nav, .sb-label__filter {",
" border-right: 1px solid #000000 !important;",
" background-color: #212121 !important;",
" color: white !important;",
" }",
" aside {",
" border-left: 1px solid #000000 !important;",
" color: white !important;",
" }",
" .chat-info-general__action__item {",
" color: #ffffff !important;",
" }",
" .chat-info-general__action__item:hover:not(.no-hover) {",
" background: #000000 !important;",
" }",
" .quote-banner-content {",
" color: #000 !important;",
" }",
" .filter-tag-item.selected, .filter-tag-item.chat-message.first-selected, .filter-tag-item.chat-message.last-selected {",
" background: #1c1e21 !important;",
" color: white !important;",
" }",
" .filter-tag-item {",
" border-color: #0606ab !important;",
" color: #a0a8b1 !important;",
" background: #2d2c2c !important;",
" }",
" .fr-center-top {",
" background: #212121 !important;",
" }",
" .fr-center-top div{",
" color: white !important;",
" }",
" #searchResultList .list-friend-conctact, #contactList .list-friend-conctact, #groupList .list-friend-conctact {",
" color: white !important;",
" }",
" #contactList{",
" background: #353535 !important;",
" color: white !important;",
" }",
" .contact-list-item:hover {",
" background: #121213 !important;",
" }",
" .contact-list-item.selected, .contact-list-item.chat-message.first-selected, .contact-list-item.chat-message.last-selected {",
" background: #353535 !important;",
" }",
" .contact-list-item:hover.selected, .contact-list-item.chat-message.first-selected:hover, .contact-list-item.chat-message.last-selected:hover {",
" background: #121213 !important;",
" }",
" .chat-message__actions{",
" color: #000000 !important;",
" }",
" .card-send-time, .card-send-time__sendTime{",
" color: rgba(255, 255, 255, 0.87) !important;",
" }",
" .chat-info-general__action__item:after{",
" border-bottom: 1px solid #484848 !important;",
" }",
" .reacts-list{",
" color: #2d2d2d !important;",
" }",
" .card.card--picture.has-caption.me > .chat-message-caption, .card.has-caption.me.card--video > .chat-message-caption, .card.has-caption.me.card--oa > .chat-message-caption, .card.card--picture.has-caption.me > .card-send-time, .card.has-caption.me.card--video > .card-send-time, .card.has-caption.me.card--oa > .card-send-time {",
" background: #255eb3 !important;",
" }",
" a {",
" color: #0068ff !important;",
" }",
".item-title-name span {",
" color: white !important;",
"}",
".media-empty-text{",
" margin-bottom: auto !important;",
"}"
].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