Hexo+Butterfly深色浅色模式下分别使用不同的网站背景

修改<BlogRoot>\themes\butterfly\_config.yml，其中background_dark参数为深色模式下的图片地址。

# Website Background (设置网站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: url(<FilePath>)
+background_dark: url(<FilePath>)

修改<BlogRoot>\themes\butterfly\source\css\var.styl，在第 36 行左右

1
2
3

$web-bg = hexo-config('background') && unquote(hexo-config('background'))
+$web-bg-dark = hexo-config('background_dark') && unquote(hexo-config('background_dark'))
$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh

修改<BlogRoot>\themes\butterfly\source\css\_mode\darkmode.styl，在第 41 行左右

+   #web_bg
+     background: $web-bg-dark
-   #web_bg:before,
    #footer:before,
    #page-header:before
      position: absolute
      width: 100%
      height: 100%
      background-color: alpha($dark-black, .7)
      content: ''

扩展：

若你想像我一样使用四方连续风格图片（即重复图片）且能正常显示 repeat 效果，则继续按照下方更改

修改<BlogRoot>\themes\butterfly\source\css\_global\index.styl，在第 64 行左右

if $web-bg
  #web_bg
-   position: fixed
+   position: absolute  //此处可控制背景是否能跟随滑轮滚动，按需选择是否更改
    z-index: -999
    width: 100%
    height: 100%
    background: $web-bg
-   background-attachment: local
-   background-position: center
-   background-size: cover
-   background-repeat: no-repeat