【建议】新增一个配置 auto-colorscheme

jerryc127 commented 3 years ago

建议在前端配置新增一个配置 auto-colorscheme(随系统状态切换light dark mode)

如果设为true 的话

就加载这段css https://github.com/lizheming/waline/blob/209e86c3f95b3a5d0c7988498419a87044bf4878/packages/client/src/index.css#L718

@media (prefers-color-scheme:dark) {
    .v[data-class=v] .status-bar,
    .v[data-class=v] .veditor,
    .v[data-class=v] .vinput,
    .v[data-class=v] p,
    .v[data-class=v] pre code {
        color: #b2b2b5
    }
    .v[data-class=v] .vsys,
    .v[data-class=v] .vtime {
        color: #929298
    }
    .v[data-class=v] code,
    .v[data-class=v] pre,
    .v[data-class=v] pre code {
        color: #929298;
        background-color: #151414
    }
    .v[data-class=v] .vwrap {
        border-color: #b2b2b5
    }
    .v[data-class=v] .vicon {
        fill: #b2b2b5
    }
    .v[data-class=v] .vicon.actived {
        fill: #66b1ff
    }
    .v[data-class=v] .vbtn {
        color: #b2b2b5;
        border-color: #b2b2b5
    }
    .v[data-class=v] .vbtn:hover {
        color: #66b1ff;
        border-color: #66b1ff
    }
    .v[data-class=v] a:hover {
        color: #d7191a
    }
    .v[data-class=v] .vcards .vcard .vcontent.expand:before {
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .3)), to(rgba(0, 0, 0, .7)));
        background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .7))
    }
    .v[data-class=v] .vcards .vcard .vcontent.expand:after {
        background: rgba(0, 0, 0, .7)
    }
}

这样可以避免主题不是夜间模式下，由于系统是夜间模式而导致评论部分ui 看不清的情况

（本想写了推送给你，但我看不懂react的逻辑）

jerryc127 commented 3 years ago

https://github.com/lizheming/waline/issues/110

lizheming commented 3 years ago

@waline/client@0.14.8 暂时去除了自适应相关的配置，如果需要适配可以在主题 <body> 添加 class .dark。

walinejs / waline

【建议】新增一个配置 auto-colorscheme #164