一、打破千篇一律的工业风呆板界面
Clash Verge Rev 作为基于 Tauri + React 架构开发的现代化客户端,其性能和内存控制有口皆碑。
但对于很多讲究桌面视觉统一感、追求极简极客美学的用户来说,其出厂自带的主题风格显得有些素淡:
灰白底色的大色块、中规中矩的直角卡片、稍微显得有些拥挤的节点列表。
如果你使用的是精美的深色动态壁纸或定制的 Windows 主题,这个白花花的大窗口往往显得有些格格不入。
许多人不知道,因为基于 Web 前端技术构建,Clash Verge Rev 本身拥有极其开放的样式扩展接口。
它允许用户在外部注入自定义的 CSS 样式表。
你不需要去重新编译源码,只需编写几行简洁的 CSS 规则,就能给客户端一键换肤:引入高大上的毛玻璃模糊(Backdrop Blur)、平滑的悬浮过渡微动效,以及精致的无边框圆角卡片。
二、核心 CSS 代码与效果拆解
点击左侧导航栏的 「设置」,向下滚动找到 「样式设置 / 自定义 CSS (Custom CSS)」。

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