Butterfly主题调整|分割线颜色修改

问题⁍

butterfly的颜色配置理应是在_config.butterfly.yml中进行，hr_color一项应当就是分割线的颜色，可是实际网页中的颜色却与配置的不一致。

检查元素：这个颜色从哪里来？⁍

在分割线那里右击检查元素查看网页样式，发现hr-border的颜色为#21ffeb

在源码中查找这个颜色未果，换关键词搜索hr-border

发现--hr-border的颜色定义为lighten($theme-hr-color,50%)

HSL: lighten(color,amount)⁍

检索可知，HSL中的lighten()函数作用如下：

lighten(color,amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色^[1]

回到样式控制台，利用内置的颜色选择器将16进制颜色转换为HSLA

我设置的hr-color：
网页中的--hr-border：

比较发现，两者的颜色确实只有亮度值L发生了变化，但并没有达到50%，不清楚是怎么算出来的

这部分可能需要继续看源码，说不定在其他地方也有调整

但是不追求精确的某一个颜色的话，可以大致进行调整了

修改方案⁍

方案一：修改Butterfly的source⁍

修改文件 yourBlog\themes\butterfly\source\css\_global\index.styl中的--hr-border和--hr-before-border(不要忘记这个)，直接改为想要的颜色的值就可以了

缺点：想换主题色的时候不能只改配置文件

方案二：修改`hr-color`的颜色值⁍

既然--hr-border会对hr-color做lighten()的操作，那么在定义hr-color的时候可以比预想的调高HSL里的亮度值L。

我这里把63%降为了20%

缺点：不知道hr-color在其他地方有没有发挥过作用，至少源文件里没有检索到。为什么不直接定义为--hr-border-color呢？

后记⁍

在检索hr-color的时候，看到了有一项是hr-icon，可能就和分割线上的小剪刀图标有关系。

发现在主题配置文件里直接可以改：
1
2
3
4
hr_icon:
  enable: true
  icon: # the unicode value of Font Awesome icon, such as '\3423'
  icon-top:
可以去Free Icons | Font Awesome找unicode