Clash Verge 主题与界面美化：深色模式、主题色、自定义 CSS

Clash Verge Rev 的界面是可以美化的：从最简单的深色模式、主题色，到用自定义 CSS 改字体、配色、隐藏元素。本文按可操作的顺序讲一遍。

本文以 Clash Verge Rev v2.x 为准；自定义 CSS 需 v1.5.8 及以上。

1. 深色 / 浅色模式 #

最基础的外观切换：设置(Settings) → 主题模式(Theme Mode)，三选一：

  • 浅色(Light) / 深色(Dark) / 跟随系统(System)

跟随系统会随你操作系统的明暗自动切换，无需重启。

Clash Verge 深浅色模式

2. 主题色（Primary Color） #

在 设置 的主题设置里可以修改主题色，也就是按钮、选中态、强调色的颜色。改完即时生效，适合想要品牌色 / 个人偏好配色的人。

3. 托盘图标与策略组图标 #

Clash Verge Rev 还支持自定义：

  • 托盘图标(Tray Icon)：系统托盘里不同模式（TUN / 系统代理）可用不同图标。
  • 策略组图标(Proxy Group Icon)：给代理组配图标，订阅里用 icon 字段指定图标 URL，界面会显示出来。

4. 自定义 CSS（CSS Injection）—— 深度美化 #

想改字体、间距、背景、隐藏某些元素，用 CSS Injection。

入口：打开 设置(Settings)，找到 CSS Injection（自定义 CSS），把 CSS 粘进去即可即时生效。

需要 Clash Verge Rev v1.5.8 及以上（开发者工具也需要这个版本）。

官方示例（改字体、标题背景与字号）：

span {
  font-family: '幼圆' !important;
}
header p {
  background-color: red !important;
  font-size: 58px !important;
}

如果层叠样式没生效，加 !important 强制覆盖。

更多可复制片段：

/* 全局换字体 */
* {
  font-family: 'LXGW WenKai', 'Microsoft YaHei', sans-serif !important;
}

/* 调整圆角更柔和 */
.MuiPaper-root {
  border-radius: 14px !important;
}

/* 隐藏某个你不想看到的元素（先用开发者工具确认 class） */
/* .some-element { display: none !important; } */

怎么找到正确的选择器？ #

界面元素的 class 名称不一定直观。用开发者工具(DevTools) 定位：在要修改的元素上右键检查，看它的标签 / class，再写进 CSS Injection。Clash Verge Rev 的界面基于 Material UI，常见 class 多以 Mui 开头。

5. 哪里找现成主题 / CSS #

社区有人分享 Clash Verge 的 CSS 片段与配色方案（GitHub、社区论坛、主题仓库）。复制别人的 CSS 到 CSS Injection 即可套用；不满意随时清空恢复默认。

关于 app 图标（clash verge icon）：桌面图标是程序自带的，一般不单独换；可自定义的是上文的托盘图标与策略组图标。

相关内容推荐 #

#Clash Verge 主题 #Clash Verge 美化 #Clash Verge CSS #Clash Verge Rev

目录