给博客深色模式下添加粒子效果canvas,深色模式下,总感觉背景有点单调,也考虑过添加背景图,还是太花了,看到别站深色模式好似夜间有流星划过,感觉这就是我想要的效果,果断整上。
博客深色模式下添加粒子流星划过效果canvas 第5张插图

魔改步骤

第一步主题中添加配置项(butterfly.yml)

# 深色模式粒子效果
darkCanvas:
  enable: true

第二步引入js(additional-js.pug)

//- 黑色模式粒子效果canvas
if theme.universe.enable
  canvas(id="universe")
  script(async src="/mx/js/dark.js")

第三步添加dark.js文件

第四步添加css

[data-theme="dark"] #universe {
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

canvas#universe {
  display: none;
}