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

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

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%,
    transparent 0,
    transparent 50%,
    hsla(0, 0%, 100%, 0.4) 0,
    hsla(0, 0%, 100%, 0.4) 75%,
    transparent 0,
    transparent
  );
  border-radius: 2em;
}

/* 滚动条滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
  background: #aaaaaa;
  background-image: -webkit-linear-gradient(
    45deg,
    hsla(0, 0%, 100%, 0.4) 25%,
    transparent 0,
    transparent 50%,
    hsla(0, 0%, 100%, 0.4) 0,
    hsla(0, 0%, 100%, 0.4) 75%,
    transparent 0,
    transparent
  );
  border-radius: 2em;
}

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

 添加如下一行代码：
 --color-pink-light: #0085AD; /* 定义亮色主题下的滚动条颜色 */