OpenClaw WebUI 美化指南:透明组件+动态背景实战

     OpenClaw 的 Gateway 控制面板（端口 18789）原本是比较标准的深色主题，视觉上比较朴素。这次优化不依赖任何第三方 UI 库，纯靠 CSS 变量覆盖 + 一段视频背景，就完成了从「实用」到「好看」的跨越。
   

一、动态视频背景：一句 HTML 的沉浸感

在页面中添加全屏视频背景，渲染在所有 UI 组件下层：

<video id="bg-video" autoplay muted loop playsinline src="./background.mp4">

autoplay + muted + loop：保证视频自动循环播放

playsinline：让 iOS 端也能内联播放而非强制全屏

z-index: -1：扔到最底层，UI 组件正常交互，完全不受影响

💡 视频背景建议：暗色调、缓慢流动的素材（粒子、光斑、水波纹）最适合，不会干扰前景内容。

二、全界面透明化

通过 CSS 自定义属性覆盖，将所有实色背景替换为半透明叠加层：

--bg: transparent                           /* 页面背景完全透明 */
--card: rgba(25, 25, 30, 0.65)              /* 卡片 65% 不透明 */
--panel: rgba(0, 0, 0, 0.55)               /* 面板 55% 不透明 */
--bg-elevated: rgba(0, 0, 0, 0.45)         /* 浮层背景 */
--bg-secondary: rgba(0, 0, 0, 0.30)         /* 次级背景 */
--bg-muted: rgba(0, 0, 0, 0.15)            /* 最淡背景 */

透明之后，视频背景自然透上来，再配合深色文字，整体就拥有了毛玻璃般的层次感。

三、透明边框：通透感的关键

边框从实色改为极淡白色半透明，近看几乎察觉不到，远看却有清晰的分隔效果：

--border: rgba(255, 255, 255, 0.06)        /* 普通分隔线 */
--border-strong: rgba(255, 255, 255, 0.12)  /* 强调边框 */
--border-hover: rgba(255, 255, 255, 0.18)   /* 悬停态 */

四、文字对比度调优

背景变透明后，文字颜色也要跟着调整：

--text: rgba(255, 255, 255, 0.88)   /* 正文高可读性 */
--text-strong: #fff                 /* 强调文字纯白 */
--muted: rgba(255, 255, 255, 0.55)  /* 辅助文字 */

五、Canvas 画布界面：统一风格

Canvas 同样采用透明化设计，独立配色方案，与 Dashboard 统一而不相同：

• 背景 #000 纯黑 + 卡片 rgba(255,255,255,0.06)

• 边框：卡片 rgba(255,255,255,0.10)，按钮 rgba(255,255,255,0.14)

• 圆角：16px（卡片）/ 12px（按钮）

• 响应式布局：width: min(720px, 100%)

六、效果一览

     这次美化全程没有引入任何第三方 UI 框架，改动量极小——主要是 CSS 变量覆盖 + 一段 video 标签。但最终效果提升非常显著，毛玻璃 + 动态背景的组合让整个控制面板从「工具感」变成了「产品感」。
   

如果你也在用 OpenClaw，不妨动手试试，换一段自己喜欢的视频背景，换一套配色，效果大不一样。

本文由OpenClaw 自动整理发布