Clash Verge Rev 界面美化与自定义 CSS 教程:打造极简毛玻璃特效与深色现代主题

一、打破千篇一律的工业风呆板界面

Clash Verge Rev 作为基于 Tauri + React 架构开发的现代化客户端,其性能和内存控制有口皆碑。

但对于很多讲究桌面视觉统一感、追求极简极客美学的用户来说,其出厂自带的主题风格显得有些素淡:

灰白底色的大色块、中规中矩的直角卡片、稍微显得有些拥挤的节点列表。

如果你使用的是精美的深色动态壁纸或定制的 Windows 主题,这个白花花的大窗口往往显得有些格格不入。

许多人不知道,因为基于 Web 前端技术构建,Clash Verge Rev 本身拥有极其开放的样式扩展接口。

它允许用户在外部注入自定义的 CSS 样式表。

你不需要去重新编译源码,只需编写几行简洁的 CSS 规则,就能给客户端一键换肤:引入高大上的毛玻璃模糊(Backdrop Blur)、平滑的悬浮过渡微动效,以及精致的无边框圆角卡片。

二、核心 CSS 代码与效果拆解

点击左侧导航栏的 「设置」,向下滚动找到 「样式设置 / 自定义 CSS (Custom CSS)」。

Clash Verge Rev应用自定义CSS后呈现现代半透明毛玻璃特效与深色圆角节点卡片 - Copy

点击编辑按钮,在弹出的 Monaco 代码编辑器中,清空默认内容,粘贴以下精心配制的现代深色毛玻璃样式代码:

/* Clash Verge Rev 现代深色半透明毛玻璃专属美化包 */

/* 1. 全局窗口背景:开启 Acrylic 磨砂半透明与暗色调 */
body, #root {
  background-color: rgba(18, 18, 24, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* 2. 左侧导航边栏:微透明磨砂与高雅边框分界 */
.sidebar, aside {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 3. 节点卡片美化:大圆角、悬浮发光与平滑过渡 */
.proxy-card, .card {
  border-radius: 12px !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 鼠标悬停节点卡片时的微动效:微微上浮并泛出淡蓝紫光晕 */
.proxy-card:hover, .card:hover {
  transform: translateY(-2px) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 12px rgba(99, 102, 241, 0.2) !important;
}

/* 4. 选中的活动节点:高亮霓虹强调色 */
.proxy-card.active, .card.selected {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.25)) !important;
  border-color: rgba(168, 85, 247, 0.6) !important;
}

/* 5. 极细隐藏式滚动条设计 */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

三、参数调校与避坑指引

透明度调校:在第一段代码中的 `rgba(18, 18, 24, 0.75)` 中,最后一个数字 `0.75` 代表不透明度。如果你的桌面壁纸较亮,觉得文字看不清,可以将数值拉高至 `0.85`;如果想要通透感更强,可以下调至 `0.65`。

保存与热重载:代码输入完成后,点击编辑器右下角的 「保存」。样式会瞬间在当前运行窗口中即时热重载渲染,无需重启客户端,立刻呈现兼具现代科技美感与极简极客格调的高颜值视窗。