diff --git a/settings.yaml b/settings.yaml index 85e7379d..aeac35cf 100644 --- a/settings.yaml +++ b/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 弹窗 diff --git a/templates/assets/libs/canvas/dark.js b/templates/assets/libs/canvas/dark.js new file mode 100644 index 00000000..687b2f5d --- /dev/null +++ b/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() \ No newline at end of file diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css index 6798bf9e..68b574e3 100644 --- a/templates/assets/zhheo/zhheoblog.css +++ b/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; diff --git a/templates/modules/layouts/layout.html b/templates/modules/layouts/layout.html index 6a1e4559..0c17bbf0 100644 --- a/templates/modules/layouts/layout.html +++ b/templates/modules/layouts/layout.html @@ -53,6 +53,10 @@ + + + +