美化Butterfly主题内的Toggle(折叠块)

Hexo-Butterfly主题通过标签外挂的方式可以在博客上展示折叠框：

收缩框

但是和主题色没啥联动……自己改下！

折叠框

方法很简单：在var.styl这个文件中找到：

1
2
3

// tag-hide
$tag-hide-bg = #f0f0f0
$tag-hide-toggle-bg = #f0f0f0

修改后：

// tag-hide
- $tag-hide-bg = #f0f0f0
- $tag-hide-toggle-bg = #f0f0f0
+ $tag-hide-bg = $theme-color
+ $tag-hide-toggle-bg = rgba($theme-color, 0.12) //透明度，可以自行修改

测试一下！

23333

引用部分

其实引用部分同理，也是这样子修改……

// code
$line-height-code-block = 1.6
$blockquote-color = #6a737d
$blockquote-padding-color = $themeColorEnable && hexo-config('theme_color.blockquote_padding_color') ? convert(hexo-config('theme_color.blockquote_padding_color')) : #28c28c
$blockquote-background-color = $themeColorEnable && hexo-config('theme_color.blockquote_background_color') ? alpha(convert(hexo-config('theme_color.blockquote_background_color')), .1) : alpha($blockquote-padding-color, .1)

// var.styl
// code
...
- $blockquote-color = #6a737d
- $blockquote-padding-color = $themeColorEnable && hexo-config('theme_color.blockquote_padding_color') ? convert(hexo-config('theme_color.blockquote_padding_color')) : #28c28c
- $blockquote-background-color = $themeColorEnable && hexo-config('theme_color.blockquote_background_color') ? alpha(convert(hexo-config('theme_color.blockquote_background_color')), .1) : alpha($blockquote-padding-color, .1)
+ $blockquote-color = darken($theme-color,35%) //颜色加深
+ $blockquote-padding-color = rgba($theme-color, 0.8)
+ $blockquote-background-color = rgba($theme-color, 0.08)

记得修改下夜间模式~

// darkmode.styl
-    --blockquote-color: alpha(#FFFFFF, .7)
-    --blockquote-bg: lighten(#121212, 10)
+    --blockquote-color: $blockquote-color
+    --blockquote-bg: $blockquote-background-color

大功告成~