分类
Tips

临时修复暗色模式中的 Valine

Valine 目前还不支持暗色模式中的主题颜色,导致阅读性极低,简单添加几行代码使它支持暗色模式。

现在越来越多的系统支持了暗色模式,连带着许多网站也支持了暗色模式,并且可以随着客户端系统的模式自动切换。我的博客支持暗色模式,但是评论部分不支持,在 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 更新:评论中的代码现已支持暗色模式显示。

“临时修复暗色模式中的 Valine”上的4条回复

评论代码块测试 Java

public class Test {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注