现在越来越多的系统支持了暗色模式,连带着许多网站也支持了暗色模式,并且可以随着客户端系统的模式自动切换。我的博客支持暗色模式,但是评论部分不支持,在 macOS 与 Android 暗色模式下都会遇到如下图所示的问题。

截屏2019-11-2422.17.37
Valine 在暗色主题中的显示效果

在官方给出修复之前,可以使用如下代码临时修复此问题:

@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;
    }
}

但是同时要注意,这段代码一定要插入在引入 Valine js 之后才会生效。