在线调色板
修改链接颜色
在 /butterfly/source/css/post/_layout 目录下的 post.styl 中找到并修改如下代码：
1
2
3
4
5
6
7
8
9
| #article-container
word-wrap: break-word
overflow-wrap: break-word
a
color: $theme-link-color
&:hover
text-decoration: underline
|
将其中的color修改为自己喜欢的颜色即可
修改文章末尾声明颜色
同样在 post.styl 文件中找到并修改如下代码：
1
2
3
4
5
6
7
| .post-copyright
&-meta
color: $light-blue
font-weight: bold
&-info
padding-left: 6px
|
替换其中的 $light-blue 即可
修改目录栏颜色
在 /butterfly/source/css/post/_layout 目录下的 aside.styl 中找到并修改如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
| .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 中找到并修改如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
| & > .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 文件
查找并修改以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .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
|
