现在越来越多的系统支持了暗色模式,连带着许多网站也支持了暗色模式,并且可以随着客户端系统的模式自动切换。我的博客支持暗色模式,但是评论部分不支持,在 macOS 与 Android 暗色模式下都会遇到如下图所示的问题。
在官方给出修复之前,可以使用如下代码临时修复此问题:
@media (prefers-color-scheme: dark) {
.v *,
.v .vwrap input,
.v .vwrap input::placeholder,
.v .veditor,
.v .veditor::placeholder,
.v a,
.v a:hover {
color: hsla(0,0%,100%,.75);
opacity: 1;
}
.v .vbtn {
color: hsla(0,0%,100%,.75);
background: #333;
border: none;
}
.v .vbtn:hover {
color: #3090e4;
border-color: #3090e4;
}
.v .vlist .vcard .vhead .vsys {
background: #333;
}
.v code {
color: #fff;
background: #000;
}
.v .vlist .vcard .vcontent.expand:before {
background: linear-gradient(180deg,hsla(0,0%,20%,0),hsla(0, 0%, 20%, 0.9));
}
.v .vlist .vcard .vcontent.expand:after {
background: hsla(0, 0%, 20%, 0.9);
}
}
但是同时要注意,这段代码一定要插入在引入 Valine js 之后才会生效。
2020-01-22 更新:评论中的代码现已支持暗色模式显示。