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