// ==UserScript==
// @name         闲鱼暗色模式
// @namespace    https://www.goofish.com/
// @version      1.0.1
// @description  为闲鱼桌面站注入护眼暗色主题。
// @author       jkfujr
// @match        https://www.goofish.com/*
// @run-at       document-start
// @grant        none
// @license      GNU GPLv3
// @homepageURL  https://github.com/jkfujr/userscripts
// @supportURL   https://github.com/jkfujr/userscripts/issues
// @noframes
// ==/UserScript==

(function() {
    'use strict';

    const rootClass = 'xy-dark-mode';
    const styleId = 'xy-dark-mode-style';
    const css = `
:root.${rootClass} {
    color-scheme: dark;
    --xy-bg: #0f1419;
    --xy-bg-soft: #151b21;
    --xy-panel: #1a2129;
    --xy-panel-hover: #222b35;
    --xy-panel-strong: #26313d;
    --xy-border: rgba(255, 255, 255, .10);
    --xy-border-soft: rgba(255, 255, 255, .07);
    --xy-text: #e7edf3;
    --xy-muted: #aab5c0;
    --xy-faint: #7f8b96;
    --xy-brand: #ffe60f;
    --xy-brand-hover: #ffef68;
    --xy-brand-active: #d6c112;
    --xy-price: #ff7a4f;
    --xy-link: #83b8ff;
    --xy-shadow: rgba(0, 0, 0, .38);
}

html.${rootClass},
html.${rootClass} body,
html.${rootClass} #root {
    background: var(--xy-bg) !important;
    color: var(--xy-text) !important;
}

html.${rootClass} body,
html.${rootClass} input,
html.${rootClass} textarea,
html.${rootClass} select,
html.${rootClass} button {
    color: var(--xy-text) !important;
}

html.${rootClass} a {
    color: inherit !important;
}

html.${rootClass} img,
html.${rootClass} video,
html.${rootClass} canvas,
html.${rootClass} svg,
html.${rootClass} [class*="qrcode--"],
html.${rootClass} [class*="qrCodeWrapper--"],
html.${rootClass} [class*="avatar--"],
html.${rootClass} [class*="item-user-info-avatar--"],
html.${rootClass} [class*="feeds-image--"],
html.${rootClass} [class*="carouselImg--"],
html.${rootClass} [class*="fadeInImg--"] {
    filter: none !important;
}

html.${rootClass} [class*="header-container--"] {
    --header-bg-color: #151b21 !important;
    --header-font-color: var(--xy-text) !important;
    background: var(--xy-bg-soft) !important;
    border-bottom: 1px solid var(--xy-border-soft) !important;
}

html.${rootClass} [class*="content-container--"],
html.${rootClass} [class*="footer-container--"] {
    background: var(--xy-bg) !important;
}

html.${rootClass} [class*="footer-wrap--"] {
    background: #11171d !important;
}

html.${rootClass} main,
html.${rootClass} [class*="item-main-container--"],
html.${rootClass} [class*="item-user-container--"],
html.${rootClass} [class*="item-feeds-container--"],
html.${rootClass} [class*="feeds-item-wrap--"],
html.${rootClass} [class*="cate-card-container--"],
html.${rootClass} [class*="cate-item-sub-container--"],
html.${rootClass} [class*="mid-card-container--"],
html.${rootClass} [class*="right-card-item--"],
html.${rootClass} [class*="right-card-main--"],
html.${rootClass} [class*="carousel-container--"],
html.${rootClass} [class*="player-wrapper--"],
html.${rootClass} [class*="card--"],
html.${rootClass} [class*="empty-container--"],
html.${rootClass} [class*="announcementWrap--"] {
    background-color: var(--xy-panel) !important;
    border-color: var(--xy-border-soft) !important;
    box-shadow: none !important;
}

html.${rootClass} [class*="feeds-item-wrap--"]:hover,
html.${rootClass} [class*="right-card-item--"]:hover,
html.${rootClass} [class*="right-card-main--"]:hover {
    background-color: var(--xy-panel-hover) !important;
    border-color: var(--xy-border) !important;
    box-shadow: 0 8px 18px var(--xy-shadow) !important;
}

html.${rootClass} [class*="feeds-image-container--"],
html.${rootClass} [class*="banner-y--"],
html.${rootClass} [class*="banner-x-top--"],
html.${rootClass} [class*="banner-x-bottom--"],
html.${rootClass} [class*="bgc--"],
html.${rootClass} .ant-skeleton,
html.${rootClass} .ant-skeleton-avatar,
html.${rootClass} .ant-skeleton-button,
html.${rootClass} .ant-skeleton-input,
html.${rootClass} .ant-skeleton-image,
html.${rootClass} .ant-skeleton-title,
html.${rootClass} .ant-skeleton-paragraph li {
    background-color: var(--xy-panel-strong) !important;
}

html.${rootClass} [class*="search-input--"] {
    --search-input-border-color: var(--xy-border) !important;
    background: #10161c !important;
    border-color: var(--xy-border) !important;
    color: var(--xy-text) !important;
}

html.${rootClass} [class*="search-input--"]::placeholder,
html.${rootClass} input::placeholder,
html.${rootClass} textarea::placeholder {
    color: var(--xy-faint) !important;
}

html.${rootClass} [class*="search-history--"],
html.${rootClass} [class*="select--"],
html.${rootClass} [class*="hover-container--"] .ant-popover-inner,
html.${rootClass} [class*="popover--"] .ant-popover-inner,
html.${rootClass} .ant-popover-inner,
html.${rootClass} .ant-modal-content,
html.${rootClass} .ant-modal-header,
html.${rootClass} .ant-modal-body,
html.${rootClass} .Toastify__toast-theme--light {
    background: var(--xy-panel) !important;
    border-color: var(--xy-border-soft) !important;
    box-shadow: 0 12px 30px var(--xy-shadow) !important;
    color: var(--xy-text) !important;
}

html.${rootClass} .ant-modal-mask {
    background-color: rgba(0, 0, 0, .72) !important;
}

html.${rootClass} .ant-modal-title,
html.${rootClass} .ant-modal-confirm-title,
html.${rootClass} .ant-modal-confirm-content,
html.${rootClass} .ant-popover-inner-content {
    color: var(--xy-text) !important;
}

html.${rootClass} .ant-modal-close,
html.${rootClass} .ant-popover-arrow:before {
    color: var(--xy-muted) !important;
    background: var(--xy-panel) !important;
}

html.${rootClass} [class*="history-item--"]:hover,
html.${rootClass} [class*="history-item--"].active,
html.${rootClass} [class*="option--"]:hover,
html.${rootClass} [class*="item--"]:hover {
    background-color: var(--xy-panel-hover) !important;
}

html.${rootClass} [class*="filter-tab--"],
html.${rootClass} [class*="skuItem--"],
html.${rootClass} [class*="countAdder--"],
html.${rootClass} [class*="item-user-fish-shop--"],
html.${rootClass} [class*="sellerButton--"],
html.${rootClass} [class*="right--"],
html.${rootClass} [class*="banned--"],
html.${rootClass} [class*="greyBtn--"],
html.${rootClass} [class*="defaultBtn--"],
html.${rootClass} [class*="refresh--"] {
    background: var(--xy-panel-strong) !important;
    border-color: var(--xy-border-soft) !important;
    color: var(--xy-text) !important;
}

html.${rootClass} [class*="filter-tab--"]:hover,
html.${rootClass} [class*="skuItem--"]:hover,
html.${rootClass} [class*="sellerButton--"]:hover,
html.${rootClass} [class*="right--"]:hover,
html.${rootClass} [class*="refresh--"]:hover {
    background: var(--xy-panel-hover) !important;
}

html.${rootClass} [class*="filter-tab-checked--"],
html.${rootClass} [class*="filter-guess-like-tab--"],
html.${rootClass} [class*="skuItemCurrent--"],
html.${rootClass} [class*="yellowBtn--"],
html.${rootClass} [class*="want--"],
html.${rootClass} [class*="maskBtn--"],
html.${rootClass} [class*="qrBtn--"],
html.${rootClass} [class*="feedback--"],
html.${rootClass} [class*="search-icon--"] {
    background: var(--xy-brand) !important;
    border-color: var(--xy-brand) !important;
    color: #1f1f1f !important;
}

html.${rootClass} [class*="yellowBtn--"]:hover,
html.${rootClass} [class*="want--"]:hover,
html.${rootClass} [class*="maskBtn--"]:hover,
html.${rootClass} [class*="qrBtn--"]:hover,
html.${rootClass} [class*="feedback--"]:hover,
html.${rootClass} [class*="search-icon--"]:hover {
    background: var(--xy-brand-hover) !important;
}

html.${rootClass} [class*="buy--"],
html.${rootClass} [class*="redBtn--"] {
    background: #323b45 !important;
    color: var(--xy-text) !important;
}

html.${rootClass} [class*="buy--"]:hover,
html.${rootClass} [class*="redBtn--"]:hover {
    background: #3d4854 !important;
}

html.${rootClass} [class*="main-title--"],
html.${rootClass} [class*="right-card-title--"],
html.${rootClass} [class*="right-card-slogan--"],
html.${rootClass} [class*="item-feeds-title--"],
html.${rootClass} [class*="item-user-info-nick--"],
html.${rootClass} [class*="nick--"],
html.${rootClass} [class*="title--"],
html.${rootClass} [class*="desc--"],
html.${rootClass} [class*="content--"],
html.${rootClass} [class*="label--"],
html.${rootClass} [class*="value--"],
html.${rootClass} [class*="text--"],
html.${rootClass} [class*="main--"] [class*="desc--"],
html.${rootClass} [class*="post--"],
html.${rootClass} [class*="countTitle--"],
html.${rootClass} [class*="skuTitle--"],
html.${rootClass} [class*="headSkuInfo--"],
html.${rootClass} [class*="confirmTitle--"],
html.${rootClass} [class*="confirmDesc--"],
html.${rootClass} [class*="maskText--"],
html.${rootClass} [class*="btnChildren--"],
html.${rootClass} [class*="sidebar-item-text-container--"],
html.${rootClass} [class*="footer-item-imgs-imgtext-maintitle--"],
html.${rootClass} [class*="cate-item-container--"] > a,
html.${rootClass} [class*="cate-item-sub-item-cate2--"] > a,
html.${rootClass} [class*="cate-item-sub-item-cate3--"] > a {
    color: var(--xy-text) !important;
}

html.${rootClass} [class*="seller-text--"],
html.${rootClass} [class*="cpv--"],
html.${rootClass} [class*="origin-price--"],
html.${rootClass} [class*="notice--"],
html.${rootClass} [class*="item-user-info-label--"],
html.${rootClass} [class*="follow--"],
html.${rootClass} [class*="hover-code-subtitle--"],
html.${rootClass} [class*="footer-item-container--"],
html.${rootClass} [class*="text-span--"],
html.${rootClass} [class*="value--mlshTf0N"],
html.${rootClass} [class*="history-label--"] {
    color: var(--xy-muted) !important;
}

html.${rootClass} [class*="price--"],
html.${rootClass} [class*="priceText--"],
html.${rootClass} [class*="priceSign--"],
html.${rootClass} [class*="sign--"],
html.${rootClass} [class*="number--"],
html.${rootClass} [class*="decimal--"],
html.${rootClass} [class*="magnitude--"],
html.${rootClass} [class*="mainPrice--"],
html.${rootClass} [class*="headPrice--"],
html.${rootClass} [class*="yen--"],
html.${rootClass} [class*="skuPrice--"],
html.${rootClass} [class*="right-card-main-symbol--"],
html.${rootClass} [class*="right-card-main-number--"],
html.${rootClass} [class*="right-card-main-chinese--"],
html.${rootClass} [class*="service--"],
html.${rootClass} [class*="recommend-reason--"],
html.${rootClass} [class*="down--"],
html.${rootClass} [class*="discount--"] {
    color: var(--xy-price) !important;
}

html.${rootClass} [class*="promise--"],
html.${rootClass} [class*="report--"],
html.${rootClass} [class*="show--"] [class*="text--"],
html.${rootClass} [class*="footer-item-imgs-imgtext-title--"] {
    color: var(--xy-link) !important;
}

html.${rootClass} [class*="tag-bottom-line--"],
html.${rootClass} [class*="boxChecked--"] {
    background-color: var(--xy-brand) !important;
}

html.${rootClass} [class*="show--"] {
    background: linear-gradient(270deg, var(--xy-panel) 54%, rgba(26, 33, 41, 0)) !important;
}

html.${rootClass} [class*="overlay--"],
html.${rootClass} [class*="notloginMask--"] {
    background: rgba(15, 20, 25, .78) !important;
}

html.${rootClass} [class*="sidebar-container--"] {
    background: var(--xy-panel) !important;
    box-shadow: 0 8px 24px var(--xy-shadow) !important;
}

html.${rootClass} [class*="sidebar-item-divider--"],
html.${rootClass} [class*="space--"],
html.${rootClass} [class*="line--"],
html.${rootClass} [class*="divider--"],
html.${rootClass} [class*="comVLine--"],
html.${rootClass} [class*="skuVLine--"],
html.${rootClass} [class*="cpv-line--"] {
    border-color: var(--xy-border) !important;
    background-color: var(--xy-border) !important;
}

html.${rootClass} [class*="item-main-window-list-item--"]:hover,
html.${rootClass} [class*="item-main-window-list-item--"].active,
html.${rootClass} [class*="list--"] [class*="item-main-window-list-item--"]:hover {
    border-color: var(--xy-brand) !important;
}

html.${rootClass} [class*="bottomLead--"] {
    background: rgba(0, 0, 0, .78) !important;
}

html.${rootClass} [class*="red-point-container--"],
html.${rootClass} [class*="orderTips--"],
html.${rootClass} [class*="state--"] {
    background: var(--xy-price) !important;
    color: #fff !important;
}

html.${rootClass} [class*="header-main--"],
html.${rootClass} [class*="search-container--"] {
    background: var(--xy-bg-soft) !important;
    border-color: var(--xy-border-soft) !important;
    box-shadow: none !important;
}

html.${rootClass} [class*="search-container--"] {
    outline: none !important;
}

html.${rootClass} [class*="search-input--"] {
    box-shadow: none !important;
}

html.${rootClass} [class*="search-item--"] {
    color: var(--xy-muted) !important;
}

html.${rootClass} [class*="search-item--"]:hover {
    color: var(--xy-text) !important;
}

html.${rootClass} [class*="filter-tab--"] *,
html.${rootClass} [class*="filter-tab-bold--"],
html.${rootClass} [class*="filter-tab-normal--"] {
    color: var(--xy-text) !important;
}

html.${rootClass} [class*="filter-tab-checked--"] *,
html.${rootClass} [class*="filter-guess-like-tab--"] * {
    color: #1f1f1f !important;
}

html.${rootClass} [class*="feeds-item-wrap--"] [class*="gradient-image-text--"] {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--xy-text) !important;
}

html.${rootClass} [class*="feeds-item-wrap--"] div:has(> [class*="gradient-image-text--"]) {
    background: rgba(255, 230, 15, .14) !important;
    border: 1px solid rgba(255, 230, 15, .24) !important;
    color: var(--xy-brand) !important;
}

html.${rootClass} [class*="feeds-item-wrap--"] div:has(> [class*="gradient-image-text--"]) [class*="gradient-image-text--"] {
    color: var(--xy-brand) !important;
}

html.${rootClass} [class*="main-title--"] img[src*="O1CN017BILHl"] {
    background: var(--xy-brand) !important;
    border-radius: 3px !important;
    box-shadow: 0 0 0 1px rgba(255, 230, 15, .25) !important;
}

html.${rootClass} [class*="sidebar-container--"] [class*="sidebar-item-wrap--"] svg,
html.${rootClass} [class*="sidebar-container--"] [class*="sidebar-item-wrap--"] svg * {
    color: var(--xy-text) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

html.${rootClass} [class*="sidebar-container--"] [class*="sidebar-item-wrap--"]:hover svg,
html.${rootClass} [class*="sidebar-container--"] [class*="sidebar-item-wrap--"]:hover svg * {
    color: var(--xy-brand) !important;
}

html.${rootClass} [class*="search-icon--"] *,
html.${rootClass} [class*="search-icon--"] span {
    color: #1f1f1f !important;
}

html.${rootClass} [class*="search-container--"] [class*="search-icon--"] {
    border: 0 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px var(--xy-brand) !important;
}

html.${rootClass} [class*="search-container--"] [class*="search-icon--"]::before,
html.${rootClass} [class*="search-container--"] [class*="search-icon--"]::after {
    content: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html.${rootClass} [class*="header-right--"] {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.${rootClass} [class*="user-order-container--"],
html.${rootClass} [class*="user-order-container--"]:hover,
html.${rootClass} [class*="user-order-container--"]:focus-within,
html.${rootClass} [class*="user-order-container--"] [class*="item--m9jSTUup"],
html.${rootClass} [class*="user-order-container--"] [class*="item--m9jSTUup"]:hover,
html.${rootClass} [class*="user-order-container--"] [class*="item--m9jSTUup"]:focus,
html.${rootClass} [class*="user-order-container--"] [class*="item--m9jSTUup"]:active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.${rootClass} [class*="user-order-container--"] [class*="nick--RyNYtDXM"],
html.${rootClass} [class*="user-order-container--"] [class*="orderText--"] {
    color: var(--xy-text) !important;
}

html.${rootClass} [class*="user-order-container--"] [class*="orderP--"] img {
    filter: invert(1) opacity(.7) !important;
}

html.${rootClass} [class*="userInfo--"],
html.${rootClass} [class*="userInfo--"] [class*="top--"],
html.${rootClass} [class*="userInfo--"] [class*="list--"],
html.${rootClass} [class*="userInfo--"] [class*="bottom--"],
html.${rootClass} [class*="userInfo--"] [class*="item--nNCm9cNu"] {
    background: var(--xy-panel) !important;
    border-color: var(--xy-border-soft) !important;
    color: var(--xy-text) !important;
}

html.${rootClass} [class*="userInfo--"] [class*="item--nNCm9cNu"]:hover,
html.${rootClass} [class*="userInfo--"] [class*="btn--"]:hover {
    background: var(--xy-panel-hover) !important;
}

html.${rootClass} [class*="userInfo--"] [class*="nick--"],
html.${rootClass} [class*="userInfo--"] [class*="label--"],
html.${rootClass} [class*="userInfo--"] [class*="checkbox--"],
html.${rootClass} [class*="userInfo--"] [class*="btn--"] {
    color: var(--xy-text) !important;
}

html.${rootClass} [class*="userInfo--"] [class*="follow--"],
html.${rootClass} [class*="userInfo--"] [class*="value--"] {
    color: var(--xy-muted) !important;
}

html.${rootClass} [class*="userInfo--"] [class*="line--"] {
    background: var(--xy-border) !important;
    border-color: var(--xy-border) !important;
}

html.${rootClass} [class*="userInfo--"] [class*="navBoxWrap--"] {
    background: var(--xy-brand) !important;
    border-color: var(--xy-brand) !important;
}

html.${rootClass} [class*="userInfo--"] [class*="navBoxCircle--"] {
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28) !important;
}

html.${rootClass} [class*="userInfo--"] [class*="itemRight--"] img {
    filter: invert(1) opacity(.65) !important;
}

html.${rootClass} [class*="buttons--"][class*="sticky--"],
html.${rootClass} [class*="sellerButtonGroup--"] {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.${rootClass} [class*="sellerButtonGroup--"] [class*="sellerButton--"] {
    background: var(--xy-panel-strong) !important;
    border: 1px solid var(--xy-border-soft) !important;
    color: var(--xy-text) !important;
    box-shadow: none !important;
}

html.${rootClass} [class*="sellerButtonGroup--"] [class*="sellerButton--"]:hover {
    background: var(--xy-panel-hover) !important;
    border-color: var(--xy-border) !important;
}

html.${rootClass}.page-personal [class*="personal--"],
html.${rootClass}.page-personal [class*="container--OBDzoaU1"],
html.${rootClass}.page-personal [class*="personalWrap--"],
html.${rootClass}.page-personal [class*="container--rklFh1rU"],
html.${rootClass}.page-personal [class*="filter--"],
html.${rootClass}.page-personal [class*="tabWrap--"],
html.${rootClass}.page-personal [class*="container--G4WCI4_c"],
html.${rootClass}.page-personal [class*="cardWarp--"] {
    background: var(--xy-panel) !important;
    border-color: var(--xy-border-soft) !important;
    box-shadow: none !important;
}

html.${rootClass}.page-personal [class*="container--rklFh1rU"] {
    background: linear-gradient(180deg, var(--xy-panel-strong) 0%, var(--xy-panel) 100%) !important;
}

html.${rootClass}.page-personal [class*="itemContent--"],
html.${rootClass}.page-personal [class*="itemChild--"] {
    background: transparent !important;
    color: var(--xy-text) !important;
}

html.${rootClass}.page-personal [class*="itemContent--"]:hover,
html.${rootClass}.page-personal [class*="itemChild--"]:hover,
html.${rootClass}.page-personal [class*="itemContentSelected--"] {
    background: var(--xy-panel-hover) !important;
    color: var(--xy-text) !important;
}

html.${rootClass}.page-personal [class*="textReal--"],
html.${rootClass}.page-personal [class*="textShadow--"],
html.${rootClass}.page-personal [class*="num--"],
html.${rootClass}.page-personal [class*="info--"],
html.${rootClass}.page-personal [class*="infoTop--"],
html.${rootClass}.page-personal [class*="infoCenterText--"],
html.${rootClass}.page-personal [class*="bottom--eUkWZRHp"],
html.${rootClass}.page-personal [class*="btnChildren--"] {
    color: var(--xy-text) !important;
}

html.${rootClass}.page-personal [class*="textSelected--"] [class*="textReal--"],
html.${rootClass}.page-personal [class*="textSelected--"] [class*="textShadow--"],
html.${rootClass}.page-personal [class*="numSelected--"] {
    color: var(--xy-brand) !important;
}

html.${rootClass}.page-personal [class*="line--"],
html.${rootClass}.page-personal [class*="bottomLine--"] {
    background: var(--xy-border) !important;
    border-color: var(--xy-border) !important;
}

html.${rootClass}.page-personal [class*="lineSelected--"] {
    background: var(--xy-brand) !important;
}

html.${rootClass}.page-personal [class*="button--"][class*="defaultBtn--"] {
    background: var(--xy-panel-strong) !important;
    border-color: var(--xy-border-soft) !important;
    color: var(--xy-text) !important;
}

html.${rootClass}.page-personal [class*="button--"][class*="defaultBtn--"]:hover {
    background: var(--xy-panel-hover) !important;
}

html.${rootClass}.page-personal [class*="itemIcon--"],
html.${rootClass}.page-personal [class*="itemContentArrow--"] {
    filter: invert(1) opacity(.72) !important;
}

html.${rootClass}.page-im body {
    background: var(--xy-bg) !important;
    background-image: none !important;
}

html.${rootClass}.page-im [class*="im-main--"],
html.${rootClass}.page-im [class*="chat-container--"] {
    background: var(--xy-panel) !important;
    border-color: var(--xy-border-soft) !important;
    box-shadow: none !important;
}

html.${rootClass}.page-im [class*="conversation-list--"],
html.${rootClass}.page-im [class*="conv-list-scroll--"],
html.${rootClass}.page-im [class*="conv-header--"],
html.${rootClass}.page-im [class*="conversation-item--"],
html.${rootClass}.page-im [class*="empty-container--"] {
    background: var(--xy-bg-soft) !important;
    border-color: var(--xy-border-soft) !important;
}

html.${rootClass}.page-im [class*="conversation-item-top--"] {
    background: var(--xy-panel) !important;
}

html.${rootClass}.page-im [class*="conversation-item-active--"],
html.${rootClass}.page-im [class*="conversation-item-hover--"],
html.${rootClass}.page-im [class*="conversation-item--"]:hover,
html.${rootClass}.page-im [class*="goodsItemWrap--"]:hover,
html.${rootClass}.page-im [class*="radioitem--"]:hover,
html.${rootClass}.page-im [class*="option--"]:hover {
    background: var(--xy-panel-hover) !important;
}

html.${rootClass}.page-im [class*="chat-main--"],
html.${rootClass}.page-im [class*="message-list--"],
html.${rootClass}.page-im [class*="message-list-reverse--"],
html.${rootClass}.page-im [class*="scroll-container--"] {
    background: var(--xy-bg) !important;
}

html.${rootClass}.page-im [class*="message-topbar--"],
html.${rootClass}.page-im [class*="sendbox--"],
html.${rootClass}.page-im [class*="bottom-bar-background--"],
html.${rootClass}.page-im [class*="drawer--"],
html.${rootClass}.page-im [class*="sendWrap--"],
html.${rootClass}.page-im [class*="quickReplyTooltip--"],
html.${rootClass}.page-im [class*="amap-sug-result"],
html.${rootClass}.page-im [class*="hover-container--"] .ant-popover-inner {
    background: var(--xy-panel) !important;
    border-color: var(--xy-border-soft) !important;
    box-shadow: none !important;
}

html.${rootClass}.page-im [class*="list-border-top--"],
html.${rootClass}.page-im [class*="list-border-bottom--"],
html.${rootClass}.page-im [class*="card-action--"],
html.${rootClass}.page-im [class*="card-action-wrapper--"],
html.${rootClass}.page-im [class*="msg-dx-line--"] {
    border-color: var(--xy-border) !important;
}

html.${rootClass}.page-im [class*="my-message--"],
html.${rootClass}.page-im [class*="msg-text-right--"],
html.${rootClass}.page-im [class*="message-text-right--"],
html.${rootClass}.page-im [class*="wrapper--"][class*="right--"] {
    background: #3a351f !important;
    border: 1px solid rgba(255, 230, 15, .20) !important;
    color: var(--xy-text) !important;
}

html.${rootClass}.page-im [class*="other-message--"],
html.${rootClass}.page-im [class*="msg-text-left--"],
html.${rootClass}.page-im [class*="message-text-left--"],
html.${rootClass}.page-im [class*="wrapper--"][class*="left--"] {
    background: var(--xy-panel-strong) !important;
    border: 1px solid var(--xy-border-soft) !important;
    color: var(--xy-text) !important;
}

html.${rootClass}.page-im [class*="voice-to-text-container--"],
html.${rootClass}.page-im [class*="msg-text-card--"],
html.${rootClass}.page-im [class*="msg-dx-content--"],
html.${rootClass}.page-im [class*="notify-center-card-container--"],
html.${rootClass}.page-im [class*="notify-center-trade-card-product-info--"],
html.${rootClass}.page-im [class*="transaction-tip--"],
html.${rootClass}.page-im [class*="card--"] {
    background: var(--xy-panel-strong) !important;
    border-color: var(--xy-border-soft) !important;
    color: var(--xy-text) !important;
}

html.${rootClass}.page-im [class*="transaction-info--"] {
    background: #8a5a15 !important;
    color: #fff !important;
}

html.${rootClass}.page-im [class*="text-content--"],
html.${rootClass}.page-im [class*="message-content-text--"],
html.${rootClass}.page-im [class*="message-text--"],
html.${rootClass}.page-im [class*="reply-text--"],
html.${rootClass}.page-im [class*="text1--"],
html.${rootClass}.page-im [class*="title--"],
html.${rootClass}.page-im [class*="card-title--"],
html.${rootClass}.page-im [class*="msg-dx-title--"],
html.${rootClass}.page-im [class*="msg-dx-desc--"],
html.${rootClass}.page-im [class*="notify-center-card-title--"],
html.${rootClass}.page-im [class*="notify-center-trade-card-product-first-line--"],
html.${rootClass}.page-im [class*="label--"],
html.${rootClass}.page-im [class*="radioitemLabel--"],
html.${rootClass}.page-im [class*="option--"],
html.${rootClass}.page-im [class*="xianyu-account--"],
html.${rootClass}.page-im [class*="icon-more--"] {
    color: var(--xy-text) !important;
}

html.${rootClass}.page-im [class*="summary--"],
html.${rootClass}.page-im [class*="text2--"],
html.${rootClass}.page-im [class*="read-status-text--"],
html.${rootClass}.page-im [class*="loading-text--"],
html.${rootClass}.page-im [class*="user-nickname--"],
html.${rootClass}.page-im [class*="voice-label--"],
html.${rootClass}.page-im [class*="card-desc--"],
html.${rootClass}.page-im [class*="content--"],
html.${rootClass}.page-im [class*="desc--"],
html.${rootClass}.page-im [class*="notify-center-card-tag--"],
html.${rootClass}.page-im [class*="notify-center-card-content--"],
html.${rootClass}.page-im [class*="notify-center-card-time--"],
html.${rootClass}.page-im [class*="notify-center-card-unsubscribe--"],
html.${rootClass}.page-im [class*="notify-center-trade-card-product-avatar-name--"],
html.${rootClass}.page-im [class*="delivery--"],
html.${rootClass}.page-im [class*="modal-content--"] {
    color: var(--xy-muted) !important;
}

html.${rootClass}.page-im [class*="sendbox--"] textarea,
html.${rootClass}.page-im [class*="textarea-no-border--"],
html.${rootClass}.page-im [class*="textarea-disabled--"],
html.${rootClass}.page-im [class*="search-input--"],
html.${rootClass}.page-im [class*="search--"] .ant-input,
html.${rootClass}.page-im [class*="search--"] .ant-input-affix-wrapper,
html.${rootClass}.page-im .ant-input,
html.${rootClass}.page-im .ant-input-affix-wrapper,
html.${rootClass}.page-im .ant-input-number,
html.${rootClass}.page-im .ant-input-number-input {
    background: #10161c !important;
    border-color: var(--xy-border) !important;
    box-shadow: none !important;
    color: var(--xy-text) !important;
}

html.${rootClass}.page-im [class*="sendbox--"] textarea::placeholder,
html.${rootClass}.page-im [class*="search-input--"]::placeholder,
html.${rootClass}.page-im .ant-input::placeholder,
html.${rootClass}.page-im .ant-input-number-input::placeholder {
    color: var(--xy-faint) !important;
}

html.${rootClass}.page-im [class*="xianyu-account--"],
html.${rootClass}.page-im [class*="xianyu-account--"]:active,
html.${rootClass}.page-im [class*="xianyu-account--"]:focus,
html.${rootClass}.page-im [class*="xianyu-account--"]:hover {
    background: transparent !important;
    border-color: var(--xy-border) !important;
    box-shadow: none !important;
    color: var(--xy-text) !important;
}

html.${rootClass}.page-im [class*="emoji-icon--"],
html.${rootClass}.page-im [class*="upload-icon--"],
html.${rootClass}.page-im [class*="screenshot-icon--"],
html.${rootClass}.page-im [class*="item-icon--"],
html.${rootClass}.page-im [class*="location-icon--"],
html.${rootClass}.page-im [class*="quick-reply-icon--"],
html.${rootClass}.page-im [class*="expandIcon--"] {
    filter: invert(1) opacity(.72) !important;
}

html.${rootClass}.page-im [class*="emoji-icon--"]:hover,
html.${rootClass}.page-im [class*="upload-icon--"]:hover,
html.${rootClass}.page-im [class*="screenshot-icon--"]:hover,
html.${rootClass}.page-im [class*="item-icon--"]:hover,
html.${rootClass}.page-im [class*="location-icon--"]:hover,
html.${rootClass}.page-im [class*="quick-reply-icon--"]:hover {
    background-color: var(--xy-panel-hover) !important;
}

html.${rootClass}.page-im [class*="conversation-list--"] :where(div, span, p),
html.${rootClass}.page-im [class*="message-list--"] :where(div, span, p),
html.${rootClass}.page-im [class*="message-list-reverse--"] :where(div, span, p) {
    color: var(--xy-text) !important;
}

html.${rootClass}.page-im [class*="conversation-list--"] [class*="summary--"],
html.${rootClass}.page-im [class*="conversation-list--"] [class*="time--"],
html.${rootClass}.page-im [class*="conversation-list--"] [class*="empty-container--"],
html.${rootClass}.page-im [class*="message-list--"] [class*="read-status-text--"],
html.${rootClass}.page-im [class*="message-list--"] [class*="loading-text--"],
html.${rootClass}.page-im [class*="message-list--"] [class*="user-nickname--"],
html.${rootClass}.page-im [class*="message-list-reverse--"] [class*="read-status-text--"],
html.${rootClass}.page-im [class*="message-list-reverse--"] [class*="loading-text--"],
html.${rootClass}.page-im [class*="message-list-reverse--"] [class*="user-nickname--"] {
    color: var(--xy-muted) !important;
}

html.${rootClass}.page-im [class*="my-message--"] :where(div, span, p),
html.${rootClass}.page-im [class*="msg-text-right--"] :where(div, span, p),
html.${rootClass}.page-im [class*="other-message--"] :where(div, span, p),
html.${rootClass}.page-im [class*="msg-text-left--"] :where(div, span, p) {
    color: var(--xy-text) !important;
}

html.${rootClass}.page-im [class*="container--dgZTBkgv"] {
    background: var(--xy-panel) !important;
    border-color: var(--xy-border-soft) !important;
    box-shadow: none !important;
    color: var(--xy-text) !important;
}

html.${rootClass}.page-im [class*="container--dgZTBkgv"] :where(div, span, p, a) {
    color: var(--xy-text) !important;
}

html.${rootClass}.page-im [class*="container--dgZTBkgv"] [class*="money--"] {
    color: var(--xy-price) !important;
}

html.${rootClass}.page-im [class*="container--dgZTBkgv"] [class*="delivery--"] {
    color: var(--xy-muted) !important;
}

html.${rootClass}.page-im [class*="container--dgZTBkgv"] [class*="yellowBtn--"],
html.${rootClass}.page-im [class*="container--dgZTBkgv"] [class*="status--"] {
    background: var(--xy-brand) !important;
    color: #1f1f1f !important;
}

html.${rootClass}.page-im [class*="container--dgZTBkgv"] [class*="yellowBtn--"]:hover,
html.${rootClass}.page-im [class*="container--dgZTBkgv"] [class*="status--"]:hover {
    background: var(--xy-brand-hover) !important;
}

html.${rootClass}.page-im [class*="container--dgZTBkgv"] [class*="btnChildren--"] {
    color: #1f1f1f !important;
}

html.${rootClass}.page-im [class*="message-list--"]::-webkit-scrollbar-thumb,
html.${rootClass}.page-im [class*="message-list-reverse--"]::-webkit-scrollbar-thumb,
html.${rootClass}.page-im [class*="conv-list-scroll--"]::-webkit-scrollbar-thumb,
html.${rootClass}.page-im [class*="itemList--"]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16) !important;
}

html.${rootClass}.page-im [class*="message-list--"]::-webkit-scrollbar-thumb:hover,
html.${rootClass}.page-im [class*="message-list-reverse--"]::-webkit-scrollbar-thumb:hover,
html.${rootClass}.page-im [class*="conv-list-scroll--"]::-webkit-scrollbar-thumb:hover,
html.${rootClass}.page-im [class*="itemList--"]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .26) !important;
}

html.${rootClass} ::selection {
    background: rgba(255, 230, 15, .32) !important;
    color: var(--xy-text) !important;
}
`;

    const matchesRoute = (route) => {
        const path = window.location.pathname;
        return path === route || path.startsWith(`${route}/`);
    };

    const enableRootClass = () => {
        const root = document.documentElement;

        if (!root) {
            return false;
        }

        root.classList.add(rootClass);
        root.classList.toggle('page-im', matchesRoute('/im'));
        root.classList.toggle('page-personal', matchesRoute('/personal'));
        return true;
    };

    const appendStyle = () => {
        if (document.getElementById(styleId)) {
            return true;
        }

        const target = document.head || document.documentElement;

        if (!target) {
            return false;
        }

        const style = document.createElement('style');
        style.id = styleId;
        style.textContent = css;
        target.appendChild(style);
        return true;
    };

    const enableDarkMode = () => {
        const rootReady = enableRootClass();
        const styleReady = appendStyle();

        return rootReady && styleReady;
    };

    const retryEnableDarkMode = () => {
        if (!enableDarkMode()) {
            window.setTimeout(retryEnableDarkMode, 50);
        }
    };

    const watchRouteChanges = () => {
        const originalPushState = history.pushState;
        const originalReplaceState = history.replaceState;

        history.pushState = function() {
            const result = originalPushState.apply(this, arguments);
            enableRootClass();
            return result;
        };

        history.replaceState = function() {
            const result = originalReplaceState.apply(this, arguments);
            enableRootClass();
            return result;
        };

        window.addEventListener('popstate', enableRootClass);
        window.addEventListener('hashchange', enableRootClass);
    };

    retryEnableDarkMode();
    watchRouteChanges();

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', retryEnableDarkMode, { once: true });
    } else {
        retryEnableDarkMode();
    }
})();