增加顶部渐变色和滚动条样式

增加顶部渐变色和滚动条样式

2025年1月2日已解决。

次功能由《Hydoc的小站》前端大佬贡献，感谢大佬。💖💖

环境

自己开源的 《vuepress-theme-vdoing-one-public》网站模板。

此模板是在Young Kbt blog的开源项目《Kele-Bingtang.github.io》基础上修改为自己的风格而成，感谢大佬开源的模板&感谢原作者开源的vdoing主题。❤️❤️

预览

配置

在docs\.vuepress\styles\palette.styl文件后面添加如下代码：

.reading-progress.progress{background:linear-gradient(114.2deg,rgba(184,215,21,1) -15.3%,rgba(148,187,233,1) 14.5%,rgba(21,215,182,1) 38.7%,rgba(129,189,240,1) 58.8%,rgba(219,108,205,1) 77.3%,rgba(240,129,129,1) 88.5%) !important;}::-webkit-scrollbar{width:0.4rem;height:0.4rem;}::-webkit-scrollbar-track{border-radius:2em;}::-webkit-scrollbar-thumb{background-color:var(--color-pink-light) !important;background-image:-webkit-linear-gradient(45deg,hsla(0,0%,100%,0.4) 25%,transparent0,transparent50%,hsla(0,0%,100%,0.4) 0,hsla(0,0%,100%,0.4) 75%,transparent0,transparent);border-radius:2em;}::-webkit-scrollbar-thumb:hover{background:#aaaaaa;background-image:-webkit-linear-gradient(45deg,hsla(0,0%,100%,0.4) 25%,transparent0,transparent50%,hsla(0,0%,100%,0.4) 0,hsla(0,0%,100%,0.4) 75%,transparent0,transparent);border-radius:2em;}

在次文件里搜索theme-mode-light：

添加如下一行代码：--color-pink-light:#0085AD;