html {
    --font-default: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, "sans-serif";
    --background-reverse: #000;
    --background: #fff;
    --background-translucent: hsla(0, 0%, 100%, .7);
    --sub-background: #f5f5f5;
    --sib-background: #fff;
    --glass-background: hsla(0, 0%, 100%, .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, .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: hsla(0, 0%, 100%, .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, html[data-mode=dark] {
    background: var(--background)
}

html[data-mode=dark] {
    --background-reverse: #fff;
    --background: #232323;
    --background-translucent: rgba(35, 35, 35, .7);
    --sub-background: #303030;
    --sib-background: #303030;
    --glass-background: rgba(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, .2);
    --box-shadow-toc: inset 0 0 30px 0 hsla(0, 0%, 99%, .34), 1px 2px 10px 0 #181818;
    --background-toc: rgba(35, 35, 35, .98);
    --box-shadow-tags: 2px 2px 3px 0px #111;
    --background-tags: #35353e;
    --background-tag: #2f2f2f;
    --box-shadow-pager: 0 0 3px 0 #1b1b1b;
    --notice: #99f;
    --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] img {
    filter: brightness(.9)
}

html[data-mode=dark] .motto_day_words {
    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-anote {
    color: hsla(0, 0%, 100%, .61)
}

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

html[data-mode=dark] .joe_detail__article .joe_detail__article-abtn {
    color: hsla(0, 0%, 100%, .61)
}

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 {
    background: var(--classD)
}

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

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 {
    border-color: var(--classC);
    color: var(--classF)
}

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

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

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

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

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

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