feat: add visual customization presets to Settings > Appearance tab
Lint & Test / test (push) Failing after 30s

Add style presets (font + color combinations) and background effect
presets as a new Appearance tab in the settings modal. Style presets
include Default, Midnight, Ember, Arctic, Terminal, and Neon — each
with curated dark/light theme colors and Google Font pairings.
Background effects (Dot Grid, Gradient Mesh, Scanlines, Particles)
use a dedicated overlay div alongside the existing WebGL Noise Field.
All choices persist to localStorage and restore on page load.
This commit is contained in:
2026-03-23 15:42:08 +03:00
parent 1b5b04afaa
commit 73b2ee6222
9 changed files with 841 additions and 12 deletions
@@ -316,6 +316,7 @@
"settings.tab.general": "常规",
"settings.tab.backup": "备份",
"settings.tab.mqtt": "MQTT",
"settings.tab.appearance": "外观",
"settings.logs.open_viewer": "打开日志查看器",
"settings.external_url.label": "外部 URL",
"settings.external_url.hint": "设置后,此基础 URL 将用于 webhook 链接和其他用户可见的链接,代替自动检测的本地 IP。示例:https://myserver.example.com:8080",
@@ -1740,6 +1741,25 @@
"bulk.disable": "禁用",
"bulk.confirm_delete.one": "删除 {count} 项?",
"bulk.confirm_delete.other": "删除 {count} 项?",
"appearance.style.label": "样式预设",
"appearance.style.hint": "选择一个视觉主题 — 字体和配色方案一起应用。",
"appearance.preset.default": "默认",
"appearance.preset.midnight": "午夜",
"appearance.preset.ember": "余烬",
"appearance.preset.arctic": "极地",
"appearance.preset.terminal": "终端",
"appearance.preset.neon": "霓虹",
"appearance.preset.applied": "样式已应用",
"appearance.bg.label": "背景效果",
"appearance.bg.hint": "在界面后面添加环境背景层。",
"appearance.bg.none": "无",
"appearance.bg.noise": "噪声场",
"appearance.bg.grid": "点阵",
"appearance.bg.mesh": "渐变网格",
"appearance.bg.scanlines": "扫描线",
"appearance.bg.particles": "粒子",
"appearance.bg.applied": "背景效果已应用",
"color_strip": {
"notification": {
"search_apps": "搜索通知应用…"