白天黑夜模式切换背景图

白天背景

夜晚背景

步骤

1. 打开主题配置文件_config.butterfly.yml，搜索background并定位到下列代码位置，对比代码修改

ps：注意删除加号并对齐

# 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>)

1. 打开Blog根目录/themes/butterfly/source/css/var.styl，定位到36行左右(具体位置请对比下列代码)，对比下列代码增加一行

ps：注意删除加号并对齐

$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

1. 打开Blog根目录/themes/butterfly/source/css/_mode/darkmode.styl，定位到41行左右(具体位置请对比下列代码)，对比下列代码修改

ps：注意删除加号和减号并将#web_bg对齐#footer

+   #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: ''

1. hexo三连~