外观设置

Zeno 把外观拆成三个可以组合的层级：明暗模式、外观预设和服务器卡片主题。调整外观不会改变节点数据、通知规则或 Agent 协议。

三层设置

层级	字段	可选值	作用
明暗模式	theme	system、light、dark	全站颜色模式
外观预设	appearance_preset	default、gaussian_blur	卡片表面、透明度和模糊组合
服务器卡片主题	server_card_theme	classic、capsule	首页服务器卡片内部编排

classic 是默认和安全回退。旧数据库没有卡片主题、旧响应省略字段或存量值非法时，页面会回退到 classic。

明暗模式

• 跟随系统：根据浏览器 prefers-color-scheme 选择浅色或深色；
• 浅色：固定浅色；
• 深色：固定深色。

前台导航中的临时切换保存在当前浏览器；后台保存的主题是站点默认值。验收时必须分别检查浅色和深色，不能只看“跟随系统”。

外观预设

• 默认主题：清晰、稳定的基础表面；
• 高斯模糊主题：结合背景图、透明度和模糊产生玻璃效果。

没有背景图时，透明和模糊参数仍会安全回落到页面表面色。高斯模糊不是独立卡片结构，应该与所有服务器卡片主题组合使用。

服务器卡片主题

• 经典卡片：保留完整规格区和既有信息密度；
• 节点舱：把硬件容量合并到四个资源项，继续复用网络、账单、延迟、丢包和健康历史。

切换主题后检查长服务器名、大容量、长账单周期、离线水印和窄屏布局。任何主题都不能丢失数据或改变状态含义。

背景图

支持电脑端和手机端两个 URL。手机端留空时跟随电脑端。

允许：

• 站内绝对路径，例如 /assets/background.webp；
• https:// URL。

不接受脚本 URL、协议相对地址或包含凭据的 URL。建议：

• 使用 WebP/AVIF；
• 控制体积，避免阻塞首屏；
• 手机背景使用纵向裁切；
• 同时验证浅色/深色文字对比度；
• 背景包含人物或文字时，检查卡片遮挡和不同屏幕裁切。

数值字段

字段	范围	说明
card_opacity	0.2–1	卡片表面不透明度
card_blur	0–40	背景模糊像素值
card_radius	8–36	面板圆角
border_strength	0–1	边框强度
shadow_strength	0–1	阴影强度
background_overlay	0–0.8	背景遮罩强度
theme_color	#RRGGBB	主色

参数应小步调整。不要用极低透明度牺牲文字可读性，也不要用强阴影和强边框同时制造重复层级。

自定义代码

custom_code 是 CSS-only 外观扩展：前端只提取 <style> 内容或纯 CSS 文本，不执行 <script>，也不挂载 HTML 事件处理器。

公开可见

自定义 CSS 会应用到公开页面。不要写入 Token、secret、credential、内网地址或私人信息。

建议只覆盖稳定、明确的外观选择器；不要隐藏状态、账单、流量或通知错误来“美化”页面。正式主题开发请按 主题开发指南 修改源码并补测试，而不是用大量 !important 长期覆盖。

视觉验收

保存后至少检查：

• 1440×900、1024×768、390×844；
• 浅色和深色；
• 默认和高斯模糊；
• 经典卡片和节点舱；
• 无背景、有电脑背景、有独立手机背景；
• online、warning、offline、no_data；
• 长名称、长账单、大容量和空值；
• 页面无横向滚动，导航、弹层和卡片仍可点击。

如果外观导致页面不可用，先在后台恢复 default、classic 和安全参数，再清空有问题的自定义 CSS。