深色模式下，总感觉背景有点单调，也考虑过添加背景图，还是太花了，看到安知鱼的深色模式，感觉这就是我想要的效果，果断整上

效果预览

魔改步骤

  1. 主题中添加配置项(butterfly.yml)
    1
    2
    3
    # 深色模式粒子效果
    darkCanvas:
      enable: true
  2. 引入 js(additional-js.pug)
    1
    2
    3
    4
    //- 黑色模式粒子效果canvas
    if theme.universe.enable
      canvas(id="universe")
      script(async src="/mx/js/dark.js")
  3. dark.js文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    function dark() {
      window.requestAnimationFrame =
        window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame;
      var n,
        e,
        i,
        h,
        t = 0.05,
        s = document.getElementById("universe"),
        o = !0,
        a = "180,184,240",
        r = "226,225,142",
        d = "226,225,224",
        c = [];

      function f() {
        (n = window.innerWidth),
          (e = window.innerHeight),
          (i = 0.216 * n),
          s.setAttribute("width", n),
          s.setAttribute("height", e);
      }
      function u() {
        h.clearRect(0, 0, n, e);
        for (var t = c.length, i = 0; i < t; i++) {
          var s = c[i];
          s.move(), s.fadeIn(), s.fadeOut(), s.draw();
        }
      }
      function y() {
        (this.reset = function () {
          (this.giant = m(3)),
            (this.comet = !this.giant && !o && m(10)),
            (this.x = l(0, n - 10)),
            (this.y = l(0, e)),
            (this.r = l(1.1, 2.6)),
            (this.dx = l(t, 6 * t) + (this.comet + 1 - 1) * t * l(50, 120) + 2 * t),
            (this.dy = -l(t, 6 * t) - (this.comet + 1 - 1) * t * l(50, 120)),
            (this.fadingOut = null),
            (this.fadingIn = !0),
            (this.opacity = 0),
            (this.opacityTresh = l(0.2, 1 - 0.4 * (this.comet + 1 - 1))),
            (this.do = l(5e-4, 0.002) + 0.001 * (this.comet + 1 - 1));
        }),
          (this.fadeIn = function () {
            this.fadingIn &&
              ((this.fadingIn = !(this.opacity > this.opacityTresh)),
              (this.opacity += this.do));
          }),
          (this.fadeOut = function () {
            this.fadingOut &&
              ((this.fadingOut = !(this.opacity < 0)),
              (this.opacity -= this.do / 2),
              (this.x > n || this.y < 0) && ((this.fadingOut = !1), this.reset()));
          }),
          (this.draw = function () {
            if ((h.beginPath(), this.giant))
              (h.fillStyle = "rgba(" + a + "," + this.opacity + ")"),
                h.arc(this.x, this.y, 2, 0, 2 * Math.PI, !1);
            else if (this.comet) {
              (h.fillStyle = "rgba(" + d + "," + this.opacity + ")"),
                h.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, !1);
              for (var t = 0; t < 30; t++)
                (h.fillStyle =
                  "rgba(" +
                  d +
                  "," +
                  (this.opacity - (this.opacity / 20) * t) +
                  ")"),
                  h.rect(
                    this.x - (this.dx / 4) * t,
                    this.y - (this.dy / 4) * t - 2,
                    2,
                    2
                  ),
                  h.fill();
            } else
              (h.fillStyle = "rgba(" + r + "," + this.opacity + ")"),
                h.rect(this.x, this.y, this.r, this.r);
            h.closePath(), h.fill();
          }),
          (this.move = function () {
            (this.x += this.dx),
              (this.y += this.dy),
              !1 === this.fadingOut && this.reset(),
              (this.x > n - n / 4 || this.y < 0) && (this.fadingOut = !0);
          }),
          setTimeout(function () {
            o = !1;
          }, 50);
      }
      function m(t) {
        return Math.floor(1e3 * Math.random()) + 1 < 10 * t;
      }
      function l(t, i) {
        return Math.random() * (i - t) + t;
      }
      f(),
        window.addEventListener("resize", f, !1),
        (function () {
          h = s.getContext("2d");
          for (var t = 0; t < i; t++) (c[t] = new y()), c[t].reset();
          u();
        })(),
        (function t() {
          document.getElementsByTagName("html")[0].getAttribute("data-theme") ==
            "dark" && u(),
            window.requestAnimationFrame(t);
        })();
    }
    dark();
  4. css文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    [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;
    }