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

html {
    --font-default: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, "sans-serif";
    --theme_reverse: #000;
    --background: #fff;
    --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;
    --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] {
    --theme_reverse: #fff;
    --background: #232323;
    --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;
    --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 {
    -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)
}