Hexo 暗色模式深度适配,适用于可切换亮暗色 Hexo 主题

Hexo 暗色模式深度适配,适用于可切换亮暗色 Hexo 主题

2021 年 十一月 15 日 星期一 20 点 14 分
博客


看到自己的博客无论是在暗色模式还是亮色模式,总是亮一块、暗一块,因此决定要写一个 css 解决这些问题。
我采用的是引入自定义的 css 的方式实现适配,无需修改主题源代码。

现通过“网页开发工具”直接向网页源代码添加样式,可能会出现优先级问题,目前部分使用“!important”属性。

你需要在博客根目录source 文件夹内存放这个自定义 css 文件。
例如我的自定义 css 文件在/source/css/custom.css

Butterfly

直接将以下所有内容复制到自定义 css 中,即可获得此站点的所有暗色适配。

css custom.css
[data-theme="dark"] .aplayer{background:#000;color:#fff}[data-theme="dark"] .aplayer .aplayer-info .aplayer-music .aplayer-author{color:#ddd}[data-theme="dark"] .aplayer .aplayer-list ol li.aplayer-list-light{background:#505050}[data-theme="dark"] .aplayer .aplayer-list ol li .aplayer-list-author{color:#aaa}[data-theme="dark"] .aplayer .aplayer-list ol li .aplayer-list-index{color:#cfcfcf}[data-theme="dark"] .aplayer .aplayer-lrc:after{background:linear-gradient(180deg,hsl(0deg 0% 0% / 0%) 0,hsl(0deg 0% 0% / 80%))}[data-theme="dark"] .aplayer .aplayer-lrc:before{background:linear-gradient(180deg,#000 0,hsl(0deg 0% 0% / 0%))}[data-theme="dark"] .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{fill:#fff}[data-theme="dark"] .aplayer .aplayer-lrc p{color:#fff}[data-theme="dark"] .aplayer .aplayer-list ol li{border-top:1px solid #2e2e2e}[data-theme="dark"] .aplayer.aplayer-withlist .aplayer-info{border-bottom:1px solid #404040}[data-theme="dark"] .aplayer .aplayer-list ol li:hover{background:#444}.note.default.flat{background:#7771}.note.primary.flat{background:#6f42c111}.note.success.flat{background:#5cb85c11}.note.info.flat{background:#428bca11}.note.warning.flat{background:#f0ad4e11}.note.danger.flat{background:#d9534f11}.note.flat{color:var(--font-color)}.hide-toggle>.hide-button{background:#7772;color:var(--font-color)}.hide-toggle{border:1px solid var(--tab-border-color)}#article-container a.link-card{background:var(--global-bg) !important;box-shadow:0 4px 8px 0 rgb(0 0 0 / 10%) !important;color:var(--font-color) !important}#article-container a.link-card:hover{box-shadow:0 5px 10px 0 rgb(0 0 0 / 40%) !important}#article-container a.link-card p.url{color:var(--font-color) !important}[data-theme=dark] .note{filter:none}[data-theme="dark"] .progress{filter:brightness(.7)}[data-theme="dark"] .CtxtMenu_Menu{background-color:black;color:white}[data-theme="dark"] .CtxtMenu_Info{background-color:#333;color:white}[data-theme="dark"] .CtxtMenu_InfoContent{background-color:#222}
css custom.css
/* aplayer暗色模式适配 */
[data-theme="dark"] .aplayer {
background: #000;
color: #fff;
}
[data-theme="dark"] .aplayer .aplayer-info .aplayer-music .aplayer-author {
color: #ddd;
}
[data-theme="dark"] .aplayer .aplayer-list ol li.aplayer-list-light {
background: #505050;
}
[data-theme="dark"] .aplayer .aplayer-list ol li .aplayer-list-author {
color: #aaa;
}
[data-theme="dark"] .aplayer .aplayer-list ol li .aplayer-list-index {
color: #cfcfcf;
}
[data-theme="dark"] .aplayer .aplayer-lrc:after {
background: linear-gradient(180deg, hsl(0deg 0% 0% / 0%) 0, hsl(0deg 0% 0% / 80%));
}
[data-theme="dark"] .aplayer .aplayer-lrc:before {
background: linear-gradient(180deg, #000 0, hsl(0deg 0% 0% / 0%));
}
[data-theme="dark"] .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{
fill: #fff;
}
[data-theme="dark"] .aplayer .aplayer-lrc p{
color: #fff;
}
[data-theme="dark"] .aplayer .aplayer-list ol li{
border-top: 1px solid #2e2e2e;
}
[data-theme="dark"] .aplayer.aplayer-withlist .aplayer-info{
border-bottom: 1px solid #404040;
}
[data-theme="dark"] .aplayer .aplayer-list ol li:hover{
background: #444;
}
/* Note亮暗色适配 */
.note.default.flat{
background: #7771;
}
.note.primary.flat{
background: #6f42c111;
}
.note.success.flat{
background: #5cb85c11;
}
.note.info.flat{
background: #428bca11;
}
.note.warning.flat{
background: #f0ad4e11;
}
.note.danger.flat{
background: #d9534f11;
}
.note.flat{
color: var(--font-color);
}
/* Tag-hide亮暗色适配 */
.hide-toggle>.hide-button{
background: #7772;
color: var(--font-color);
}
.hide-toggle{
border: 1px solid var(--tab-border-color);
}
/* 好康的链接暗色适配 */
#article-container a.link-card{
background: var(--global-bg) !important;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%) !important;
color: var(--font-color) !important;
}
#article-container a.link-card:hover{
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 40%) !important;
}
#article-container a.link-card p.url{
color: var(--font-color) !important;
}
[data-theme=dark] .note{
filter: none;
}
/* 进度条暗色适配 */
[data-theme="dark"] .progress{
filter: brightness(.7);
}
/* mathjax暗色适配 */
[data-theme="dark"] .CtxtMenu_Menu{
background-color: black;
color: white;
}
[data-theme="dark"] .CtxtMenu_Info{
background-color: #333;
color: white;
}
[data-theme="dark"] .CtxtMenu_InfoContent{
background-color: #222;
}

引入 css

在你的主题配置文件中添加以下内容,注意缩进。

yml _config.butterfly.yml
inject:
head:
- <link rel="stylesheet" href="/css/custom.css">

在你的主题配置文件中添加以下内容,注意缩进。

yml _config.butterfly.yml
inject:
head:
- <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

查阅官方文档:

Aplayer 暗色适配

自定义 css 中添加以下内容。

css custom.css
[data-theme="dark"] .aplayer {
background: #000;
color: #fff;
}
[data-theme="dark"] .aplayer .aplayer-info .aplayer-music .aplayer-author {
color: #ddd;
}
[data-theme="dark"] .aplayer .aplayer-list ol li.aplayer-list-light {
background: #505050;
}
[data-theme="dark"] .aplayer .aplayer-list ol li .aplayer-list-author {
color: #aaa;
}
[data-theme="dark"] .aplayer .aplayer-list ol li .aplayer-list-index {
color: #cfcfcf;
}
[data-theme="dark"] .aplayer .aplayer-lrc:after {
background: linear-gradient(180deg, hsl(0deg 0% 0% / 0%) 0, hsl(0deg 0% 0% / 80%));
}
[data-theme="dark"] .aplayer .aplayer-lrc:before {
background: linear-gradient(180deg, #000 0, hsl(0deg 0% 0% / 0%));
}
[data-theme="dark"] .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{
fill: #fff;
}
[data-theme="dark"] .aplayer .aplayer-lrc p{
color: #fff;
}
[data-theme="dark"] .aplayer .aplayer-list ol li{
border-top: 1px solid #2e2e2e;
}
[data-theme="dark"] .aplayer.aplayer-withlist .aplayer-info{
border-bottom: 1px solid #404040;
}
[data-theme="dark"] .aplayer .aplayer-list ol li:hover{
background: #444;
}

Note(外挂标签)暗色适配

当使用 style 为modernflatno-icon 时,在暗色模式会很亮,因此使用仅对这三种进行优化。
如果只使用其中一种 style,只需选择相应的 css 即可。

css custom.css
[data-theme=dark] .note.default.modern{
background: #6664;
color: #777;
}
[data-theme=dark] .note.primary.modern{
background: #6f42c144;
color: #967fc0;
}
[data-theme=dark] .note.success.modern{
background: #3c763d44;
color: #749974;
}
[data-theme=dark] .note.info.modern{
background: #31708f44;
color: #5a8499;
}
[data-theme=dark] .note.warning.modern{
background: #8a6d3b44;
color: #9b845e;
}
[data-theme=dark] .note.danger.modern{
background: #a9444244;
color: #aa5f5e;
}
[data-theme=dark] .note.modern{
color: var(--font-color);
background-color: #6664;
border: 1px solid transparent!important;
}
[data-theme=dark] .note{
filter: none;
}

flat 与 no-icon 的 class 名相同,所以使用的 css 相同。

css custom.css
.note.default.flat{
background: #7771;
}
.note.primary.flat{
background: #6f42c111;
}
.note.success.flat{
background: #5cb85c11;
}
.note.info.flat{
background: #428bca11;
}
.note.warning.flat{
background: #f0ad4e11;
}
.note.danger.flat{
background: #d9534f11;
}
.note.flat{
color: var(--font-color);
background-color: #f9f9f911;
}
[data-theme=dark] .note{
filter: none;
}

Tag-hide(外挂标签)暗色适配

css custom.css
.hide-toggle>.hide-button{
background: #7772;
color: var(--font-color);
}
.hide-toggle{
border: 1px solid var(--tab-border-color);
}

更好康的链接(hexo-butterfly-tag-plugins-plus)暗色适配

css custom.css
#article-container a.link-card{
background: var(--global-bg) !important;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%) !important;
color: var(--font-color) !important;
}
#article-container a.link-card:hover{
box-shadow: 0 5px 10px 0 rgb(0 0 0 / 40%) !important;
}
#article-container a.link-card p.url{
color: var(--font-color) !important;
}

隐藏内容(hexo-butterfly-tag-plugins-plus)暗色适配

css custom.css
psw:hover{
color: var(--font-color) !important;
}

进度条(hexo-butterfly-tag-plugins-plus)暗色适配

css custom.css
[data-theme="dark"] .progress{
filter: brightness(.7);
}

Yun

真可谓一波三折,反复横跳,基本得知需要同时写两种选择器了。不过这样一来代码就会很长,也许可以试试看通过全局变量的方法呢?

直接将以下所有内容复制到自定义 css 中,即可获得 Yun 的所有暗色适配。

css custom.css
@media (prefers-color-scheme:dark){:root:not([data-user-color-scheme]) .v[data-class=v] .vpanel{background:#0000}:root:not([data-user-color-scheme]) .v[data-class=v] .veditor,.v[data-class=v] .vinput,:root:not([data-user-color-scheme]) .v[data-class=v] .vheader label,:root:not([data-user-color-scheme]) .v[data-class=v] .vbtn,:root:not([data-user-color-scheme]) .v[data-class=v] .vaction,:root:not([data-user-color-scheme]) .v[data-class=v] .vempty{color:var(--hty-text-color) !important}:root:not([data-user-color-scheme]) .v[data-class="v"] .veditor:focus,.v[data-class="v"] .vinput:focus{background:#fff1 !important}:root:not([data-user-color-scheme]) .v[data-class=v] .vcard .vmeta>span{background:#fff1;color:#ccc}}:root:not([data-user-color-scheme]) .v[data-class=v] .vpanel{background:#0000}[data-user-color-scheme=dark] .v[data-class=v] .veditor,.v[data-class=v] .vinput,[data-user-color-scheme=dark] .v[data-class=v] .vheader label,[data-user-color-scheme=dark] .v[data-class=v] .vbtn,[data-user-color-scheme=dark] .v[data-class=v] .vaction,[data-user-color-scheme=dark] .v[data-class=v] .vempty{color:var(--hty-text-color) !important}[data-user-color-scheme=dark] .v[data-class="v"] .veditor:focus,.v[data-class="v"] .vinput:focus{background:#fff1 !important}[data-user-color-scheme=dark] .v[data-class=v] .vcard .vmeta>span{background:#fff1;color:#ccc}@media (prefers-color-scheme:dark){:root:not([data-user-color-scheme]) .aplayer{background:rgba(30,144,255,0.05);color:var(--hty-text-color) !important}:root:not([data-user-color-scheme]) .aplayer .aplayer-info .aplayer-music .aplayer-author{color:#ddd}:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li.aplayer-list-light{background:#505050}:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li .aplayer-list-author{color:#aaa}:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li .aplayer-list-index{color:#cfcfcf}:root:not([data-user-color-scheme]) .aplayer .aplayer-lrc:after{background:linear-gradient(180deg,hsl(221deg 33% 17% / 0%) 0,hsl(221deg 33% 17%))}:root:not([data-user-color-scheme]) .aplayer .aplayer-lrc:before{background:linear-gradient(180deg,#1d263a 0,hsl(0deg 0% 0% / 0%))}:root:not([data-user-color-scheme]) .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{fill:#fff}:root:not([data-user-color-scheme]) .aplayer .aplayer-lrc p{color:#fff}:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li{border-top:1px solid #2e2e2e}:root:not([data-user-color-scheme]) .aplayer.aplayer-withlist .aplayer-info{border-bottom:1px solid #404040}:root:not([data-user-color-scheme]) .aplayer{color:var(--hty-text-color)}}[data-user-color-scheme=dark] .aplayer{background:rgba(30,144,255,0.05);color:var(--hty-text-color) !important}[data-user-color-scheme=dark] .aplayer .aplayer-info .aplayer-music .aplayer-author{color:#ddd}[data-user-color-scheme=dark] .aplayer .aplayer-list ol li.aplayer-list-light{background:#505050}[data-user-color-scheme=dark] .aplayer .aplayer-list ol li .aplayer-list-author{color:#aaa}[data-user-color-scheme=dark] .aplayer .aplayer-list ol li .aplayer-list-index{color:#cfcfcf}[data-user-color-scheme=dark] .aplayer .aplayer-lrc:after{background:linear-gradient(180deg,hsl(221deg 33% 17% / 0%) 0,hsl(221deg 33% 17%))}[data-user-color-scheme=dark] .aplayer .aplayer-lrc:before{background:linear-gradient(180deg,#1d263a 0,hsl(0deg 0% 0% / 0%))}[data-user-color-scheme=dark] .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{fill:#fff}[data-user-color-scheme=dark] .aplayer .aplayer-lrc p{color:#fff}[data-user-color-scheme=dark] .aplayer .aplayer-list ol li{border-top:1px solid #2e2e2e}[data-user-color-scheme=dark] .aplayer.aplayer-withlist .aplayer-info{border-bottom:1px solid #404040}[data-user-color-scheme=dark] .aplayer{color:var(--hty-text-color)}
css custom.css
/* Waline 暗色适配 */
@media (prefers-color-scheme: dark) {
:root:not([data-user-color-scheme]) .v[data-class=v] .vpanel {
background: #0000;
}
:root:not([data-user-color-scheme]) .v[data-class=v] .veditor, .v[data-class=v] .vinput,
:root:not([data-user-color-scheme]) .v[data-class=v] .vheader label,
:root:not([data-user-color-scheme]) .v[data-class=v] .vbtn,
:root:not([data-user-color-scheme]) .v[data-class=v] .vaction,
:root:not([data-user-color-scheme]) .v[data-class=v] .vempty {
color: var(--hty-text-color) !important;
}
:root:not([data-user-color-scheme]) .v[data-class="v"] .veditor:focus, .v[data-class="v"] .vinput:focus{
background: #fff1 !important;
}
:root:not([data-user-color-scheme]) .v[data-class=v] .vcard .vmeta>span{
background: #fff1;
color: #ccc;
}
}
:root:not([data-user-color-scheme]) .v[data-class=v] .vpanel {
background: #0000;
}
[data-user-color-scheme=dark] .v[data-class=v] .veditor, .v[data-class=v] .vinput,
[data-user-color-scheme=dark] .v[data-class=v] .vheader label,
[data-user-color-scheme=dark] .v[data-class=v] .vbtn,
[data-user-color-scheme=dark] .v[data-class=v] .vaction,
[data-user-color-scheme=dark] .v[data-class=v] .vempty {
color: var(--hty-text-color) !important;
}
[data-user-color-scheme=dark] .v[data-class="v"] .veditor:focus, .v[data-class="v"] .vinput:focus{
background: #fff1 !important;
}
[data-user-color-scheme=dark] .v[data-class=v] .vcard .vmeta>span{
background: #fff1;
color: #ccc;
}
/* Aplayer 暗色适配 */
@media (prefers-color-scheme: dark) {
:root:not([data-user-color-scheme]) .aplayer {
background: rgba(30, 144, 255, 0.05);
color: var(--hty-text-color) !important;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-info .aplayer-music .aplayer-author {
color: #ddd;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li.aplayer-list-light {
background: #505050;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li .aplayer-list-author {
color: #aaa;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li .aplayer-list-index {
color: #cfcfcf;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-lrc:after {
background: linear-gradient(180deg, hsl(221deg 33% 17% / 0%) 0, hsl(221deg 33% 17%));
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-lrc:before {
background: linear-gradient(180deg, #1d263a 0, hsl(0deg 0% 0% / 0%));
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
fill: #fff;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-lrc p {
color: #fff;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li {
border-top: 1px solid #2e2e2e;
}
:root:not([data-user-color-scheme]) .aplayer.aplayer-withlist .aplayer-info {
border-bottom: 1px solid #404040;
}
:root:not([data-user-color-scheme]) .aplayer {
color: var(--hty-text-color);
}
}
[data-user-color-scheme=dark] .aplayer {
background: rgba(30, 144, 255, 0.05);
color: var(--hty-text-color) !important;
}
[data-user-color-scheme=dark] .aplayer .aplayer-info .aplayer-music .aplayer-author {
color: #ddd;
}
[data-user-color-scheme=dark] .aplayer .aplayer-list ol li.aplayer-list-light {
background: #505050;
}
[data-user-color-scheme=dark] .aplayer .aplayer-list ol li .aplayer-list-author {
color: #aaa;
}
[data-user-color-scheme=dark] .aplayer .aplayer-list ol li .aplayer-list-index {
color: #cfcfcf;
}
[data-user-color-scheme=dark] .aplayer .aplayer-lrc:after {
background: linear-gradient(180deg, hsl(221deg 33% 17% / 0%) 0, hsl(221deg 33% 17%));
}
[data-user-color-scheme=dark] .aplayer .aplayer-lrc:before {
background: linear-gradient(180deg, #1d263a 0, hsl(0deg 0% 0% / 0%));
}
[data-user-color-scheme=dark] .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
fill: #fff;
}
[data-user-color-scheme=dark] .aplayer .aplayer-lrc p {
color: #fff;
}
[data-user-color-scheme=dark] .aplayer .aplayer-list ol li {
border-top: 1px solid #2e2e2e;
}
[data-user-color-scheme=dark] .aplayer.aplayer-withlist .aplayer-info {
border-bottom: 1px solid #404040;
}
[data-user-color-scheme=dark] .aplayer {
color: var(--hty-text-color);
}

引入 css

主题配置文件中设置,注意缩进。

yml _config.yun.yml
head:
css:
custom: /css/custom.css

查阅官方文档:

Waline 暗色适配

Masle 的博客的 Waline 评论在暗色模式下是亮的,起码在我这里是的。去了“云游君”的博客看了,一开始以为不会,结果把 dark reader 一关又变成很亮的了。

css custom.css
@media (prefers-color-scheme: dark) {
:root:not([data-user-color-scheme]) .v[data-class=v] .vpanel {
background: #0000;
}
:root:not([data-user-color-scheme]) .v[data-class=v] .veditor, .v[data-class=v] .vinput,
:root:not([data-user-color-scheme]) .v[data-class=v] .vheader label,
:root:not([data-user-color-scheme]) .v[data-class=v] .vbtn,
:root:not([data-user-color-scheme]) .v[data-class=v] .vaction,
:root:not([data-user-color-scheme]) .v[data-class=v] .vempty {
color: var(--hty-text-color) !important;
}
:root:not([data-user-color-scheme]) .v[data-class="v"] .veditor:focus, .v[data-class="v"] .vinput:focus{
background: #fff1 !important;
}
:root:not([data-user-color-scheme]) .v[data-class=v] .vcard .vmeta>span{
background: #fff1;
color: #ccc;
}
}
:root:not([data-user-color-scheme]) .v[data-class=v] .vpanel {
background: #0000;
}
[data-user-color-scheme=dark] .v[data-class=v] .veditor, .v[data-class=v] .vinput,
[data-user-color-scheme=dark] .v[data-class=v] .vheader label,
[data-user-color-scheme=dark] .v[data-class=v] .vbtn,
[data-user-color-scheme=dark] .v[data-class=v] .vaction,
[data-user-color-scheme=dark] .v[data-class=v] .vempty {
color: var(--hty-text-color) !important;
}
[data-user-color-scheme=dark] .v[data-class="v"] .veditor:focus, .v[data-class="v"] .vinput:focus{
background: #fff1 !important;
}
[data-user-color-scheme=dark] .v[data-class=v] .vcard .vmeta>span{
background: #fff1;
color: #ccc;
}

Aplayer 暗色适配

css 和 Butterfly 的差不多。

css custom.css
@media (prefers-color-scheme: dark) {
:root:not([data-user-color-scheme]) .aplayer {
background: rgba(30, 144, 255, 0.05);
color: var(--hty-text-color) !important;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-info .aplayer-music .aplayer-author {
color: #ddd;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li.aplayer-list-light {
background: #505050;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li .aplayer-list-author {
color: #aaa;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li .aplayer-list-index {
color: #cfcfcf;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-lrc:after {
background: linear-gradient(180deg, hsl(221deg 33% 17% / 0%) 0, hsl(221deg 33% 17%));
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-lrc:before {
background: linear-gradient(180deg, #1d263a 0, hsl(0deg 0% 0% / 0%));
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
fill: #fff;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-lrc p {
color: #fff;
}
:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li {
border-top: 1px solid #2e2e2e;
}
:root:not([data-user-color-scheme]) .aplayer.aplayer-withlist .aplayer-info {
border-bottom: 1px solid #404040;
}
:root:not([data-user-color-scheme]) .aplayer {
color: var(--hty-text-color);
}
}
[data-user-color-scheme=dark] .aplayer {
background: rgba(30, 144, 255, 0.05);
color: var(--hty-text-color) !important;
}
[data-user-color-scheme=dark] .aplayer .aplayer-info .aplayer-music .aplayer-author {
color: #ddd;
}
[data-user-color-scheme=dark] .aplayer .aplayer-list ol li.aplayer-list-light {
background: #505050;
}
[data-user-color-scheme=dark] .aplayer .aplayer-list ol li .aplayer-list-author {
color: #aaa;
}
[data-user-color-scheme=dark] .aplayer .aplayer-list ol li .aplayer-list-index {
color: #cfcfcf;
}
[data-user-color-scheme=dark] .aplayer .aplayer-lrc:after {
background: linear-gradient(180deg, hsl(221deg 33% 17% / 0%) 0, hsl(221deg 33% 17%));
}
[data-user-color-scheme=dark] .aplayer .aplayer-lrc:before {
background: linear-gradient(180deg, #1d263a 0, hsl(0deg 0% 0% / 0%));
}
[data-user-color-scheme=dark] .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
fill: #fff;
}
[data-user-color-scheme=dark] .aplayer .aplayer-lrc p {
color: #fff;
}
[data-user-color-scheme=dark] .aplayer .aplayer-list ol li {
border-top: 1px solid #2e2e2e;
}
[data-user-color-scheme=dark] .aplayer.aplayer-withlist .aplayer-info {
border-bottom: 1px solid #404040;
}
[data-user-color-scheme=dark] .aplayer {
color: var(--hty-text-color);
}

Volantis

当前参考版本:5.0.0-rc.1

在未来的版本中可能无此问题或此方法无效。

直接将以下所有内容复制到自定义 css 中,即可获得 Volantis 的所有暗色适配。

css custom.css
.widget>.content ul.entry a .badge,.widget>.content ul.popular-posts a .badge{color:var(--color-list) !important}.widget.grid .content .grid a{color:var(--color-list) !important}
css custom.css
/* 文章分类&分类导航 */
.widget>.content ul.entry a .badge, .widget>.content ul.popular-posts a .badge {
color: var(--color-list) !important;
}
.widget.grid .content .grid a {
color: var(--color-list) !important;
}

引入 css

很抱歉,没能在 Volantis 官方文档找到具体的 css 引入方法,此处采用的方法不确定有效。

博客配置文件中设置,注意缩进。

yml _config.yml
import:
link:
- <link rel="stylesheet" href="/css/custom.css">

文章分类&分类导航

Masle 做了一个功能站,用的是 Volantis 最新的 alpha 版,但是出现有些图标看不清的情况,确认过官网也有此问题。

css custom.css
.widget>.content ul.entry a .badge, .widget>.content ul.popular-posts a .badge {
color: var(--color-list) !important;
}
.widget.grid .content .grid a {
color: var(--color-list) !important;
}