feat: add visual customization presets to Settings > Appearance tab
Some checks failed
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

View File

@@ -316,6 +316,7 @@
"settings.tab.general": "General",
"settings.tab.backup": "Backup",
"settings.tab.mqtt": "MQTT",
"settings.tab.appearance": "Appearance",
"settings.logs.open_viewer": "Open Log Viewer",
"settings.external_url.label": "External URL",
"settings.external_url.hint": "If set, this base URL is used in webhook URLs and other user-visible links instead of the auto-detected local IP. Example: https://myserver.example.com:8080",
@@ -1740,6 +1741,25 @@
"bulk.disable": "Disable",
"bulk.confirm_delete.one": "Delete {count} item?",
"bulk.confirm_delete.other": "Delete {count} items?",
"appearance.style.label": "Style Presets",
"appearance.style.hint": "Choose a visual theme — font pairing and color palette applied together.",
"appearance.preset.default": "Default",
"appearance.preset.midnight": "Midnight",
"appearance.preset.ember": "Ember",
"appearance.preset.arctic": "Arctic",
"appearance.preset.terminal": "Terminal",
"appearance.preset.neon": "Neon",
"appearance.preset.applied": "Style preset applied",
"appearance.bg.label": "Background Effects",
"appearance.bg.hint": "Add an ambient background layer behind the interface.",
"appearance.bg.none": "None",
"appearance.bg.noise": "Noise Field",
"appearance.bg.grid": "Dot Grid",
"appearance.bg.mesh": "Gradient Mesh",
"appearance.bg.scanlines": "Scanlines",
"appearance.bg.particles": "Particles",
"appearance.bg.applied": "Background effect applied",
"color_strip": {
"notification": {
"search_apps": "Search notification apps…"