看到自己的博客无论是在暗色模式还是亮色模式,总是亮一块、暗一块,因此决定要写一个 css 解决这些问题。
我采用的是引入自定义的 css 的方式实现适配,无需修改主题源代码。
现通过“网页开发工具”直接向网页源代码添加样式,可能会出现优先级问题,目前部分使用“!important”属性。
你需要在博客根目录
的 source
文件夹内存放这个自定义 css 文件。
例如我的自定义 css 文件在/source/css/custom.css
。
Butterfly
直接将以下所有内容复制到自定义 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}
/* 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
在你的主题配置文件中添加以下内容,注意缩进。
inject: head: - <link rel="stylesheet" href="/css/custom.css">
在你的主题配置文件中添加以下内容,注意缩进。
inject: head: - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
查阅官方文档:

Aplayer 暗色适配
在自定义 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 为modern
、flat
和 no-icon
时,在暗色模式会很亮,因此使用仅对这三种进行优化。
如果只使用其中一种 style,只需选择相应的 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 相同。
.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(外挂标签)暗色适配
.hide-toggle>.hide-button{ background: #7772; color: var(--font-color);}.hide-toggle{ border: 1px solid var(--tab-border-color);}
更好康的链接(hexo-butterfly-tag-plugins-plus)暗色适配
#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)暗色适配
psw:hover{ color: var(--font-color) !important;}
进度条(hexo-butterfly-tag-plugins-plus)暗色适配
[data-theme="dark"] .progress{ filter: brightness(.7);}
Yun
真可谓一波三折,反复横跳,基本得知需要同时写两种选择器了。不过这样一来代码就会很长,也许可以试试看通过全局变量的方法呢?
直接将以下所有内容复制到自定义 css
中,即可获得 Yun 的所有暗色适配。
@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)}
/* 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
在主题配置文件
中设置,注意缩进。
head: css: custom: /css/custom.css
查阅官方文档:
Waline 暗色适配
Masle 的博客的 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 暗色适配
css 和 Butterfly 的差不多。
@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 的所有暗色适配。
.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}
/* 文章分类&分类导航 */.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 引入方法,此处采用的方法不确定有效。
在博客配置文件
中设置,注意缩进。
import: link: - <link rel="stylesheet" href="/css/custom.css">
文章分类&分类导航
Masle 做了一个功能站,用的是 Volantis 最新的 alpha 版,但是出现有些图标看不清的情况,确认过官网也有此问题。
.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;}