Butterfly主题修改颜色
修改链接颜色
在 /butterfly/source/css/post/_layout 目录下的 post.styl 中找到并修改如下代码:
#article-container
word-wrap: break-word
overflow-wrap: break-word
a
color: $theme-link-color
&:hover
text-decoration: underline
将其中的color修改为自己喜欢的颜色即可
修改文章末尾声明颜色
同样在 post.styl 文件中找到并修改如下代码:
.post-copyright
&-meta
color: $light-blue
font-weight: bold
&-info
padding-left: 6px
替换其中的 $light-blue 即可
修改目录栏颜色
在 /butterfly/source/css/post/_layout 目录下的 aside.styl 中找到并修改如下代码:
.toc-link
display: block
margin: 4px 0
padding: 1px 6px
color: var(--toc-link-color)
transition: all .2s ease-in-out
&:hover
color: $theme-color // 鼠标放置时显示的颜色
&.active
background: $theme-toc-color // 到当前文章区域时显示的背景色
color: $toc-active-color // 目录栏文字颜色
修改主页文章标题显示的颜色
在 /butterfly/source/css/post/page 目录下的 homepage.styl 中找到并修改如下代码:
& > .article-title
@extend .limit-more-line
color: var(--text-highlight-color) //标题显示的颜色
font-size: 1.72em
line-height: 1.4
transition: all .2s ease-in-out
-webkit-line-clamp: 2
+maxWidth768()
font-size: 1.43em
&:hover
color: $text-hover //鼠标放置在标题时显示的颜色
修改分类页左侧圈圈颜色
在分类页中,分类前面都有一个蓝色圈圈,鼠标放置上会变成橙黄色
如果想要改变其颜色,或者取消鼠标放置时的鼠标变成手
找到 /butterfly/source/css/_global/ 目录下的 function.styl 文件
查找并修改以下代码:
.list-beauty
list-style: none
li
position: relative
padding: .12em .4em .12em 1.4em
&:hover
&:before
border-color: var(--pseudo-hover) //鼠标放置时圈圈的颜色
&:before
position: absolute
top: .67em
left: 0
width: w = .43em
height: h = w
border: .5 * w solid .list-beauty //圈圈的颜色
border-radius: w
background: transparent
content: ''
cursor: pointer //鼠标放置在圈圈上时变成手,如果想取消,注释掉即可
transition: all .3s ease-out
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构