Zalo Dark

Dark Theme for Zalo, making your eyes feel comfortable when you work, especially at night.

// ==UserScript==
// @name     Zalo Dark
// @name:vi  Zalo Dark (Nền Tối)
// @description   Dark Theme for Zalo, making your eyes feel comfortable when you work, especially at night.
// @description:vi Dark Theme cho Zalo, giúp bạn thoải mái hơn trong việc làm việc với zalo, đặc biệt là vào buổi tối.
// @include  https://*.zalo.me/*
// @grant    GM_addStyle
// @run-at   document-start
// @version  0.0.6
// @namespace    f97
// @author       f97
// @homepageURL https://f97.xyz
// @license MIT
// ==/UserScript==

GM_addStyle ( `
html:root {
	--white-700: rgba(51, 51, 51, 0.1);
	--white-600: rgba(51, 51, 51, 0.25);
	--white-500: rgba(51, 51, 51, 0.5);
	--white-400: rgba(51, 51, 51, 0.75);
	--white-300: #18191a;
	--white-base: #18191a;
	--neutral-700: #4f5051;
	--neutral-600: #747576;
	--neutral-500: #999a9a;
	--neutral-400: #bebfbf;
	--neutral-300: #e3e3e3;
	--neutral-200: #f6f6f6;
	--neutral-100: #ffffff;
	--neutral-base: #e3e3e3;
	--grey-700: #232525;
	--grey-600: #2a2b2c;
	--grey-500: #313233;
	--grey-400: #38393a;
	--grey-300: #3d3e3f;
	--grey-base: #3d3e3f;
	--dark-grey-700: var(--grey-700);
	--dark-grey-600: var(--grey-600);
	--dark-grey-500: var(--grey-500);
	--dark-grey-400: var(--grey-400);
	--dark-grey-300: var(--grey-300);
	--dark-grey-base: var(--grey-base);
	--black-700: rgba(0, 0, 0, 0.1);
	--black-600: rgba(0, 0, 0, 0.25);
	--black-500: rgba(0, 0, 0, 0.5);
	--black-400: rgba(0, 0, 0, 0.75);
	--black-300: #fff;
	--black-base: #fff;
	--blue-700: #0f2345;
	--blue-650: #0e2d5b;
	--blue-600: #0b3a7e;
	--blue-500: #074bad;
	--blue-400: #035bdc;
	--blue-300: #3989ff;
	--blue-base: #3989ff;
	--dark-blue-200: #004bb9;
	--dark-blue-base: #004bb9;
	--red-700: #431418;
	--red-600: #58181c;
	--red-500: #791a1f;
	--red-400: #a61d24;
	--red-300: #d32029;
	--red-base: #d32029;
	--orange-700: #432716;
	--orange-600: #58351c;
	--orange-500: #794620;
	--orange-400: #a65c26;
	--orange-300: #d3722b;
	--orange-base: #d3722b;
	--green-700: #1d3712;
	--green-600: #274916;
	--green-500: #306317;
	--green-400: #3c8618;
	--green-300: #49aa19;
	--green-base: #49aa19;
	--yellow-700: #443b11;
	--yellow-600: #595014;
	--yellow-500: #7c6e14;
	--yellow-400: #aa9514;
	--yellow-300: #d8bd14;
	--yellow-200: #e8d639;
	--yellow-100: #e8d639;
	--yellow-base: #d8bd14;
	--purple-700: #24163a;
	--purple-600: #301c4d;
	--purple-500: #3e2069;
	--purple-400: #51258f;
	--purple-300: #642ab5;
	--purple-base: #642ab5;
	--pink-700: #40162f;
	--pink-600: #551c3b;
	--pink-500: #75204f;
	--pink-400: #a02669;
	--pink-300: #cb2b83;
	--pink-base: #cb2b83;
	--teal-700: #113536;
	--teal-600: #144848;
	--teal-500: #146262;
	--teal-400: #138585;
	--teal-300: #13a8a8;
	--teal-base: #13a8a8;
	--gradient-blue: linear-gradient(45deg, #408dfd, #0068ff);
	--gradient-sky-blue: linear-gradient(225deg, #00bac0, #72abff);
	--gradient-pink: linear-gradient(225deg, #ea87ff, #f2bdff);
	--gradient-orange: linear-gradient(225deg, #db342e 100%, #f5832f 0);
	--gradient-green: linear-gradient(225deg, #ffda39, #49bb82);
	--gradient-red-pink: linear-gradient(199deg, #eb8e8b, #f2bdff);
	--gradient-light-pink: linear-gradient(199deg, #ea87ff, #f2bdff);
	--gradient-purple-pink: linear-gradient(199deg, #b3a8e9, #f2bdff);
	--gradient-light-purple: linear-gradient(199deg, #7562d8, #b3a8e9);
	--gradient-purple-blue: linear-gradient(199deg, #7562d8, #0068ff);
	--gradient-light-blue: linear-gradient(199deg, #72abff, #0068ff);
	--gradient-teal-blue: linear-gradient(199deg, #00bac0, #0068ff);
	--gradient-teal-green: linear-gradient(199deg, #00bac0, #15a85f);
	--gradient-light-green: linear-gradient(199deg, #15a85f, #49bb82);
	--gradient-yellow-green: linear-gradient(199deg, #ffda39, #49bb82);
	--gradient-orange-yellow: linear-gradient(199deg, #f5832f, #ffd000);
	--gradient-red-orange: linear-gradient(199deg, #db342e, #f5832f);
	--shades-left-bar: var(--grey-700);
	--shades-left-bar-active: var(--grey-500);
	--shades-photo-bg: #545454;
	--box-input: rgba(0, 133, 255, 0.25);
	--box-input2: rgba(24, 144, 255, 0.2);
	--box-grey: rgba(0, 0, 0, 0.02);
	--box-notif: rgba(0, 26, 51, 0.1);
	--box-popover: rgba(0, 0, 0, 0.18);
	--transparent-blue08: rgba(0, 104, 255, 0.8);
	--border: var(--grey-300);
	--card-me-btn-bg: var(--blue-650);
	--card-me-btn-border: var(--blue-600);
	--message-view-gradient: linear-gradient(to top, #000, #121212);
	--brand-base: #0068ff;
}
html[data-dark-theme="dark_dimmed"]:root {
	--white-700: rgba(69, 69, 69, 0.1);
	--white-600: rgba(69, 69, 69, 0.25);
	--white-500: rgba(69, 69, 69, 0.5);
	--white-400: rgba(69, 69, 69, 0.75);
	--white-300: #232526;
	--white-base: #232526;
	--neutral-700: #58595a;
	--neutral-600: #7b7c7d;
	--neutral-500: #9e9f9f;
	--neutral-400: #c1c2c2;
	--neutral-300: #e5e5e5;
	--neutral-200: #f6f6f6;
	--neutral-100: #ffffff;
	--neutral-base: #e5e5e5;
	--grey-700: #2d3031;
	--grey-600: #343637;
	--grey-500: #3a3d3e;
	--grey-400: #424444;
	--grey-300: #464849;
	--grey-base: #464849;
	--message-view-gradient: linear-gradient(to top, #141414, #18191a);
}
html div::-webkit-scrollbar-thumb {
	background: var(--grey-300);
}
html ::selection {
	background: var(--brand-base);
}
html body {
	background: var(--white-300);
	-webkit-font-smoothing: auto;
}
html body #main-tab {
	border-right: 1px solid var(--border);
}
html body .chat-info-link__title {
	color: var(--neutral-base);
}
html body .chat-info-general__item:after {
	border-color: var(--border);
}
html body .chat-info-general__item--title--sub {
	color: var(--neutral-500);
}
html body .setting-menu,
  html body .setting-section {
	border-color: var(--border);
}
html body .app-info__header {
	align-items: center;
	color: #fff;
	background-color: var(--brand-base);
}
html body .app-info__section {
	padding: 16px;
}
html body .message-view__blur__overlay, html body .message-view__blur__overlay_noavatar {
	background: var(--message-view-gradient);
}
html body .media-tabs__main {
	border-bottom-color: var(--border);
}
html body .media-tabs__main.active {
	background-color: var(--white-300);
	border-color: transparent var(--border);
}
html body .emoji-tabs {
	background-color: var(--white-300);
}
html body .z--btn--fill--primary {
	color: var(--black-300);
	background: var(--gradient-blue);
}
html body .z--btn--fill--secondary-red.--disabled {
	color: var(--red-300);
	opacity: 0.5;
}
html body .z--btn--fill--danger {
	color: var(--black-300);
}
html body .reaction-emoji-list {
	color: var(--white-400);
	border: 0.5px solid var(--grey-400);
}
html body .leftbar-tab {
	color: var(--neutral-base);
}
html body .leftbar-tab:hover {
	background-color: var(--shades-left-bar-active);
}
html body .leftbar-unread {
	color: #fff !important;
}
html body .user-status-footer .footer-text {
	color: #fff;
}
html body .file-sidebar__option:hover {
	background-color: var(--grey-700);
}
html body .file-sidebar__option.chat-message.first-selected > .file-sidebar__option__title,
  html body .file-sidebar__option.chat-message.last-selected > .file-sidebar__option__title,
  html body .file-sidebar__option.selected > .file-sidebar__option__title {
	color: var(--neutral-300);
}
html body .file-sidebar__option.chat-message.first-selected .file-sidebar__option__icon,
  html body .file-sidebar__option.chat-message.last-selected .file-sidebar__option__icon,
  html body .file-sidebar__option.selected .file-sidebar__option__icon {
	color: var(--neutral-300);
}
html body .file-sidebar__option__icon.fa-file-icon-drive {
	color: #fff !important;
}
html body .file-sidebar__option__icon.fa-file-icon-dropbox {
	color: #fff !important;
}
html body .chat-onboard,
  html body .friend-center-main.subtract-title {
	height: 100vh;
}
html body .chips--choice.--active {
	color: #fff;
}
html body .chat-date {
	color: var(--neutral-300);
}
html body .chat-date > span {
	background: var(--white-500);
}
html body #contact-search-input {
	color: var(--neutral-base);
}
html body .phone-i-input {
	color: var(--neutral-base);
	background-color: var(--white-300);
}
html body .input {
	color: var(--neutral-base);
	background-color: var(--white-300);
}
html body .chat-input__content.highlight {
	border-color: var(--brand-base);
}
html body .chat-message .extra-btn {
	padding: 6px 16px;
	background-color: var(--white-300);
	color: var(--neutral-300);
	transition: all 250ms ease-in-out;
}
html body .chat-message .extra-btn:hover {
	color: #fff;
}
html body .chat-group-topic__item {
	min-height: 56px;
}
html body .chat-group-topic__item .icon-container {
	height: 56px;
}
html body .chat-group-topic-outer {
	min-height: 58px;
}
html body .group-board-page .virtualized-scroll {
	background: var(--white-base);
}
html body .cb-info-file-item__actions-container > div {
	background: transparent !important;
}
html body #info-links-container .library-media > div {
	background: transparent !important;
}
html body #group-creator .create-group__item__link-icon {
	color: #fff;
}
html body div[data-id="div_TabCT_FrdReqList"],
  html body div[data-id="div_TabCT_JoinedGrpList"] {
	background: var(--message-view-gradient) !important;
}
html body .chat-message.highlighted .card:not(.card--group-photo) {
	background-color: var(--blue-700);
}
html body .chat-message.highlighted .card:not(.card--group-photo):hover {
	background-color: var(--blue-650);
}
html body .sticker-selector__menu {
	height: 48px;
}
html body #stickerSelector {
	background-color: var(--white-300) !important;
}
html body .media-dock-tabs:not(.docked) {
	height: 48px;
	border-bottom: 0;
}
html body .gradient-border.left .fa-sendtome-image,
  html body .gradient-border.right .message-view__guide__item__sign .fa-sendtome-image {
	color: #fff;
}
html body .card-send-time {
	color: var(--neutral-500);
}
html body .card-send-time.me {
	color: var(--neutral-300);
	opacity: 0.5;
}
html body .chat-message {
	line-height: 1.5;
}
html body .file-message__container .file-progress-no {
	color: var(--neutral-300);
	opacity: 0.5;
}
html body .file-message__container .file-progress__track {
	background-color: var(--grey-600);
}
html body .card {
	border: 1px solid var(--grey-600);
}
html body .card.card--oa, html body .card.card--oa.admin, html body .card.card--picture, html body .card.card--picture.admin, html body .card.card--video, html body .card.card--video.admin, html body .card.card--sticker, html body .card.card--sticker.admin, html body .card.card--group-photo, html body .card.card--group-photo.admin {
	border: 0;
}
html body .card.admin {
	border: 1px solid var(--neutral-700);
}
html body .card.me {
	border-color: transparent;
}
html body .card.me .quote-name-container {
	color: var(--blue-300);
}
html body .card.me .quote-banner-content .quote-text {
	color: var(--neutral-300);
	opacity: 0.5;
}
html body .card.me .file-message__container .file-message__actions-icon {
	border-color: var(--card-me-btn-border);
	background-color: var(--card-me-btn-bg);
}
html body .card.me .file-message__container .file-progress__track {
	background-color: var(--blue-650);
}
html body .card.me.card--link .card-content > .card--link__sub {
	color: var(--neutral-300);
	opacity: 0.5;
}
html body .card.me.card--business .card-content div {
	color: #fff !important;
}
html body .card.me.card--business .msg-contact-footer {
	border-top: 1px solid var(--blue-600);
}
html body .card.me .msg-urgency-indicator {
	padding: 4px 8px;
	border-radius: 4px;
	border: 1px solid var(--red-300);
	color: var(--red-300);
}
html body .card.card--undo {
	opacity: 0.75;
	filter: blur(1px);
}
html body .card.card--undo > span {
	color: var(--neutral-300);
}
html body .message-reaction-container.me .reacts-list,
  html body .message-reaction-container.me .msg-reaction-icon {
	border-color: var(--card-me-btn-border);
	background-color: var(--card-me-btn-bg);
}
html body .message-reaction-container.me .msg-reaction-icon .default-react-icon-thumb {
	filter: brightness(2);
}
html body .tipv2-content {
	color: var(--neutral-300);
}
html body .tipv2 .tip-close-button {
	color: var(--neutral-300);
}
html body .qu-ba {
	background: var(--white-base);
}
html body .qrsc {
	background: var(--white-300);
}
html body .qri {
	background-color: var(--white-300);
}
html body .conv-action__unread .conv-unread {
	color: #fff !important;
}
html body .conv-item:hover {
	background-color: var(--grey-700);
}
html body .conv-item .conv-message.progress-bar .progress-track {
	background-color: var(--grey-400) !important;
}
html body .message-view__guide__item__sign {
	color: var(--neutral-300);
}
html body .msg-info-popup .quote-banner-content .quote-text {
	color: var(--neutral-300);
	opacity: 0.5;
}
html body .msg-info-popup .rl-msg .quote-banner {
	margin-bottom: 10px !important;
}
html body .msg-info-popup .rl-msg .msg-from-me .rl-username {
	color: var(--blue-base);
}
html body .msg-info-popup .rl-msg .msg-from-me .rl-msg-time {
	color: var(--neutral-300);
	opacity: 0.5;
}
html body .multi-select-mode-selected .card {
	border-color: var(--blue-base);
}
html body .multi-select-mode-selected .card.card--text.show-sender > .card-sender-name {
	color: var(--neutral-300);
	opacity: 0.5;
}
html body .multi-select-mode-selected .card-send-time {
	color: var(--neutral-300);
	opacity: 0.5;
}
html body .multi-select-mode-selected .quote-name-container .quote-name {
	color: var(--neutral-300);
}
html body .multi-select-mode-selected .quote-banner-content .quote-text {
	color: var(--neutral-300);
	opacity: 0.5;
}
html body .multi-select-mode-selected .message-reaction-container .reacts-list,
  html body .multi-select-mode-selected .message-reaction-container .msg-reaction-icon {
	border-color: var(--blue-500);
	background-color: var(--blue-600);
}
html body .multi-select-mode-selected .message-reaction-container .msg-reaction-icon .default-react-icon-thumb {
	filter: brightness(2);
}
html body .call-msg.--callee {
	background-color: var(--white-300);
}
html body .call-msg__separator {
	border-bottom: 1px solid var(--border);
}
html body .chat-message.me .call-msg {
	border-color: var(--blue-500);
}
html body .chat-message.me .call-msg__separator {
	border-bottom: 1px solid var(--blue-500);
}
html body .chat-message.me .call-msg__content__txt > span {
	color: var(--neutral-300);
	opacity: 0.5;
}
html body .pin-input__item {
	background: var(--white-300);
	color: var(--neutral-300);
}
html body .zl-avatar {
	--white-base: #fff;
	--neutral-500: #000;
}
html body .chat-date .line {
	border-top: 1px solid var(--grey-700);
}
html body .zavi-clock__date, html body .zavi-clock__time {
	color: var(--neutral-300);
}
html body .zavi-btn > .fa-icn-createmeeting {
	color: var(--neutral-300);
}
html body .btn-play {
	color: var(--neutral-300);
}
html body .conv-item.chat-message.first-selected,
  html body .conv-item.chat-message.last-selected,
  html body .conv-item.selected,
  html body .zavi-sidebar-list-item.chat-message.first-selected,
  html body .zavi-sidebar-list-item.chat-message.last-selected,
  html body .zavi-sidebar-list-item.selected
.contact-list-item.chat-message.first-selected,
  html body .contact-list-item.chat-message.last-selected,
  html body .contact-list-item.selected,
  html body .file-sidebar__option.chat-message.first-selected,
  html body .file-sidebar__option.chat-message.last-selected,
  html body .file-sidebar__option.selected {
	background: var(--grey-700);
}
html body .contact-list.web {
	top: 71px;
	height: calc(100% - 71px);
}
html body .image-show__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 32px;
	color: var(--neutral-base);
}
html body .image-show__title > .fl-l {
	margin: 3px 10px 3px 0px !important;
}
html body .image-show__bottom__sender__info {
	color: var(--neutral-base);
}
html body .image-show__bottom__ctrl > .btn,
  html body .image-show__bottom__ctrl > a > .btn {
	color: var(--neutral-base);
}
html body .image-show__icon-fullscreen {
	color: var(--neutral-base);
}
html body .image-show .image-show__reaction .msg-reaction-icon {
	background: var(--neutral-base);
}
html body .image-show__thumb__legend {
	color: var(--neutral-base);
}
html body .timeline-slider__handle {
	background: var(--neutral-base);
}
html body .image-show__close > .fa-close,
  html body .image-show__close > .quote-base__close-icon {
	color: var(--neutral-base);
}
html body .image-show__thumb-container .btn-play {
	color: var(--neutral-base);
}
html body .image-show__caption {
	color: var(--neutral-base);
}
html body .friend-profile__addfriend__msg {
	background: transparent;
}
html body .overlay__video__duration {
	color: var(--neutral-300);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	font-weight: 500;
}
html body .overlay__video i {
	color: var(--neutral-base);
}
html body .toast {
	color: var(--neutral-300);
	background-color: var(--grey-700);
	border: 1px solid var(--grey-base);
	box-shadow: 4px 4px 12px var(--black-500);
	padding: 16px 24px;
}
html body .app-lock__main__input {
	display: flex;
	align-items: center;
}
html body .app-lock__main__input input {
	height: 40px;
	padding: 0px 16px;
	border-right: 0;
	color: var(--neutral-base);
}
html body .app-lock__main__input a {
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0px 16px;
	border: 1px solid var(--blue-300);
	background: var(--gradient-blue);
	color: var(--neutral-300);
}
html body .chat-input__img-preview__thumb__title {
	color: var(--neutral-300);
	background-color: var(--black-400);
}
html body #scroll-vertical > div {
	background-color: var(--neutral-500) !important;
	opacity: 0.5;
}
html body .file-icon__ext-text {
	color: #fff;
}
` );