添加深色模式粒子效果

settings.yaml

@@ -1220,6 +1220,15 @@ spec:
           name: enableChangeColorScheme
           label: 允许访客切换配色
           value: true
+        - $formkit: radio
+          name: universe
+          label: 深色模式粒子效果
+          value: true
+          options:
+            - label: 打开
+              value: true
+            - label: 关闭
+              value: false
         - $formkit: textarea
           name: fontFamily
           label: 全局字体
@@ -1229,6 +1238,7 @@ spec:
           label: 全局背景图
           placeholder: "请输入图片地址"
 
+
     - group: snackbar
       label: 弹窗
       help: 右下角 snackbar 弹窗

templates/assets/libs/canvas/dark.js

@@ -0,0 +1,50 @@
+function dark() {
+    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+    var n, e, i, h, t = .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 = .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(.2, 1 - .4 * (this.comet + 1 - 1)), this.do = l(5e-4, .002) + .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()

templates/assets/zhheo/zhheoblog.css

@@ -100,7 +100,7 @@
     --heo-post-tabs-bg: #121212;
     --heo-secondbg: #30343f;
     --heo-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
-    --heo-card-bg: #1e1e1e;
+    --heo-card-bg: #1d1e22;
     --heo-card-bg-op: var(--heo-white-op);
     --heo-card-bg-none: #1d1b2600;
     --heo-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
@@ -9193,6 +9193,27 @@ li {
     margin-left: 4px;
     cursor: pointer;
 }
+
+/* 添加粒子效果 */
+[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;
+}
+
 .post-ai {
     background: var(--heo-secondbg);
     border-radius: 12px;
@@ -13998,7 +14019,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
     color: var(--heo-fontcolor) !important;
     font-size: 1.4em !important;
     padding: 0.2em .5em;
-    background: var(--heo-secondbg);
+    background: var(--heo-card-bg);
     margin: .5em .5em;
     border-radius: 12px;
     -webkit-backface-visibility: hidden;
@@ -14008,7 +14029,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
 }
 
 #page .tag-cloud-list a:hover {
-    background: var(--heo-blue) !important;
+    background: var(--heo-theme) !important;
     box-shadow: var(--heo-shadow-blue);
     color: var(--heo-white) !important;
     border: var(--style-border-hover);
@@ -14259,7 +14280,7 @@ figure.gallery-group:hover .gallery-group-name::after {
 /* 随机文章 */
 #random-post {
     min-height: 32px;
-    background: var(--card-bg);
+    background: var(--heo-card-bg);
     border: var(--style-border-always);
     box-shadow: var(--heo-shadow-border);
     padding: 20px 30px;

templates/modules/layouts/layout.html

@@ -53,6 +53,10 @@
         <!-- todo head 中有它的 css，应该可以写一块，并改成后台可配置的功能，代码中应该还有他的 js -->
         <script th:src="@{/assets/libs/snackbar/snackbar.min.js}"></script>
 
+        <!-- 深色模式下添加粒子效果canvas -->
+        <canvas th:if="${theme.config.style.universe}" id="universe" width="1312" height="880"></canvas>
+        <script th:if="${theme.config.style.universe}" async="" th:src="@{/assets/libs/canvas/dark.js}"></script>
+
         <!-- https://davidshimjs.github.io/qrcodejs/ 生成二维码 -->
         <!-- 应该是文章页分享使用 -->
         <script data-pjax src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>