html, html[data-mode=dark] {
    background: var(--background)
}

html {
    --font-default: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, "sans-serif";
    --background-reverse: #000;
    --background: #fff;
    --background-translucent: rgba(255, 255, 255, 0.7);
    --sub-background: #f5f5f5;
    --sib-background: #fff;
    --glass-background: rgba(255, 255, 255, 0.65);
    --main: #303133;
    --routine: #606266;
    --title: #333;
    --sib: #f2f6fc;
    --minor: #909399;
    --seat: #c0c4cc;
    --classA: #dcdfe6;
    --classB: #e4e7ed;
    --classC: #ebeef5;
    --classD: #f2f6fc;
    --classE: #dcdcdc;
    --classF: #333;
    --classG: #dcdcdc;
    --classH: #e9f2ff;
    --classI: #5a3713;
    --classJ: #f9e5fb;
    --classK: #e4e7ed;
    --classL: #666;
    --classM: #2d2e37;
    --quote: #50bfff;
    --code: #409eff;
    --code-background: #e8f3ff;
    --overdue-border: #ffbb76;
    --overdue-background: #fffcef;
    --radius-wrap: 8px;
    --radius-inner: 4px;
    --radius-img: 5px;
    --box-shadow: 0 0px 10px -5px #949494;
    --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-code: #bdbdbd;
    --block-shadow: 1px 2px 10px 0 #afafaf;
    --box-shadow-journal: #d8d8d8;
    --box-shadow-toc: inset 20px 0 30px 0 #dadada, 1px 2px 10px 0 #a8a8a8;
    --background-toc: rgba(255, 255, 255, 0.95);
    --box-shadow-tags: 2px 2px 3px 0px #c2c0b3;
    --background-tags: #fffaeb;
    --background-tag: #fdfdfd;
    --box-shadow-pager: 0 0 3px 0 #cacaca;
    --notice: #fb6c28;
    --background-notice: #fbf5f1;
    --background-journal: #fff;
    --background-journal-block: #f5f5f5;
    --background-journal-gradient: linear-gradient(0deg, #d4d4d4, transparent 80%);
    --shadow-notice: inset 0 0 15px #d1dae8;
    --animation-notice: twinkle 1s ease infinite alternate
}

    html[data-mode=dark] {
        --background-reverse: #fff;
        --background: #232323;
        --background-translucent: rgba(35, 35, 35, 0.7);
        --sub-background: #303030;
        --sib-background: #303030;
        --glass-background: rgba(0, 0, 0, 0.65);
        --main: #999;
        --routine: #888;
        --title: #ddd;
        --sib: #3a3a3a;
        --minor: #777;
        --seat: #666;
        --classA: #515253;
        --classB: #454545;
        --classC: #414243;
        --classD: #303030;
        --classE: #585858;
        --classF: #bdbdbd;
        --classG: #303030;
        --classH: #454545;
        --classI: #36312c;
        --classJ: #39243c;
        --classK: #eee;
        --classL: #333;
        --classM: #fff;
        --quote: #276b92;
        --code: #efa141;
        --code-background: #353246;
        --overdue-border: #6f553b;
        --overdue-background: #2b2715;
        --box-shadow: 1px 1px 3px 1px #1b1b1b;
        --text-shadow: none;
        --shadow-code: #191919;
        --block-shadow: 2px 4px 10px 0 #0a0a0a;
        --box-shadow-journal: rgba(0, 0, 0, 0.2);
        --box-shadow-toc: inset 0 0 30px 0 rgba(253, 253, 253, 0.34), 1px 2px 10px 0 #181818;
        --background-toc: rgba(35, 35, 35, 0.98);
        --box-shadow-tags: 2px 2px 3px 0px #111;
        --background-tags: #35353e;
        --background-tag: #2f2f2f;
        --box-shadow-pager: 0 0 3px 0 #1b1b1b;
        --notice: #9999ff;
        --background-notice: #303030;
        --background-journal: #383838;
        --background-journal-block: #232323;
        --background-journal-gradient: linear-gradient(0deg, #151515, transparent 80%);
        --shadow-notice: inset 0 0 15px #4a4c4e;
        --animation-notice: twinkle-night 1s ease infinite alternate
    }

        html[data-mode=dark] body:after {
            background: #2b2b2b;
            z-index: -200
        }

        html[data-mode=dark] .joe_detail__article img, html[data-mode=dark] img {
            -webkit-filter: brightness(.9);
            filter: brightness(.9)
        }

        html[data-mode=dark] .motto_day_words, html[data-mode=dark] .site_driven img.baidu, html[data-mode=dark] .site_driven img.huawei, html[data-mode=dark] .site_driven img.jinshan {
            -webkit-filter: invert(1);
            filter: invert(1)
        }

        html[data-mode=dark] .joe_header .joe_header__above-logo svg {
            display: block
        }

        html[data-mode=dark] .joe_detail__article .joe_detail__article-abtn, html[data-mode=dark] .joe_detail__article .joe_detail__article-anote {
            color: rgba(255,255,255,.61)
        }

        html[data-mode=dark] .aplayer, html[data-mode=dark] .joe_detail__article .joe_detail__overdue-wrapper {
            background: var(--classD)
        }

        html[data-mode=dark] .joe_detail__article-video .episodes .box .item:not(.active) {
            background: var(--classC)
        }

        html[data-mode=dark] .aplayer .aplayer-list li {
            color: var(--main);
            border-color: var(--classC)
        }

            html[data-mode=dark] .aplayer .aplayer-list li.aplayer-list-light, html[data-mode=dark] .aplayer .aplayer-list li:hover {
                background: #232324 !important
            }

        html[data-mode=dark] .aplayer .aplayer-info {
            border-color: var(--classC)
        }

        html[data-mode=dark] .aplayer .aplayer-music {
            color: var(--classF);
            border-color: var(--classC)
        }

        html[data-mode=dark] .aplayer .aplayer-time .aplayer-icon:hover path {
            fill: var(--classF) !important
        }

        html[data-mode=dark] .aplayer .aplayer-lrc:before {
            height: 5px;
            background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,.3)),to(transparent));
            background: linear-gradient(180deg,rgba(0,0,0,.3) 0,transparent);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cc000000", endColorstr="#00000000", GradientType=0)
        }

        html[data-mode=dark] .aplayer .aplayer-lrc:after {
            background: -webkit-gradient(linear,left top,left bottom,color-stop(0,transparent),to(rgba(0,0,0,.3)));
            background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.3));
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#cc000000", GradientType=0)
        }

        html[data-mode=dark] .joe_detail__friends {
            -webkit-filter: brightness(.8);
            filter: brightness(.8)
        }

        html[data-mode=dark] .toc-nodata em {
            opacity: .4
        }