在 Cursor 中复刻 VS Code Modern UI 圆角面板

适用场景：VS Code 已启用 Modern UI（圆角浮动面板），Cursor 主题色能对齐，但布局仍是直角拼接。
本文给出可复用方案：CSS + 一键脚本 + 推荐 settings。

1. 现象

同步 One Dark Pro 后，颜色接近了，但 VS Code 里侧栏 / 底部面板 / 编辑区是「一块块圆角卡片」，Cursor 仍是传统直角布局。

同时，Cursor 里部分文字会显得偏白、对比度不如 VS Code。

2. 根因

2.1 圆角不是主题带来的

VS Code 1.129+ 引入实验特性：

"workbench.experimental.modernUI": true

开启后，工作台会挂上类似 floating-panels / style-override 的布局与样式，给 sidebar、panel、editor 加 margin、border、border-radius。

主题扩展（如 One Dark Pro）只负责颜色 token，不负责这块布局。

2.2 Cursor 尚未具备该能力

实测对比（示例环境）：

项目	VS Code	Cursor
版本	1.132.x	3.5.x（较旧 VS Code 内核）
modernUI	有	无
圆角卡片布局	有	无

因此：只同步 workbench.colorTheme 不够。

2.3 字体发白常来自自定义语义色

例如把 namespace 设成 #cccccc，在暗色背景上会发灰发白。应回到 One Dark Pro 标准色（如 namespace #c678dd，默认前景 #abb2bf）。

3. 方案对比

方案	做法	优点	缺点
A. 等 Cursor 上游	等官方合入 Modern UI	最干净	时间不确定
B. Custom UI Style	扩展注入 CSS	不手改安装文件（由扩展改）	Cursor 上有时需手动 Reload，稳定性一般
C. 直接注入 workbench CSS（本包）	脚本写入workbench.desktop.main.css	可控、可回滚、易分享	非官方；更新后需再 apply

本包采用 方案 C，并附可选 settings 片段解决发白问题。

4. 实现思路

1. 参考 VS Code 源码中 Modern UI 相关样式（floatingPanels.css、roundedCorners.css、editorBorder.css）。
2. 提炼出 Cursor 当前 DOM 仍可用的选择器（.monaco-workbench .monaco-grid-view .part.sidebar 等）。
3. 用固定 marker 包裹注入块，便于重复 apply / 精确替换：

/* Custom UI Style Start */
... your rules ...
/* Custom UI Style End */

4. 首次注入前备份为：

workbench.desktop.main.css.custom-ui-style

5. 包内文件

cursor-modern-ui-corners/
├── README.md
├── docs/技术文章-Cursor圆角Modern-UI复刻.md   # 本文
├── styles/onedark-modern-ui.css
├── scripts/Resolve-CursorPath.ps1             # 安装路径探测与选择
├── scripts/apply.ps1
├── scripts/rollback.ps1
└── snippets/settings.snippet.json

6. 使用步骤

6.1 下载本包

把整个 cursor-modern-ui-corners 文件夹拷到任意位置即可，不必放进项目仓库。

6.2 应用圆角

cd <包路径>\scripts
powershell -ExecutionPolicy Bypass -File .\apply.ps1

脚本会：

1. 自动探测 Cursor 安装（见 §6.3），定位 workbench.desktop.main.css
2. 若无备份则创建 .custom-ui-style
3. 注入或刷新 CSS 块

然后完全退出 Cursor 再打开。

6.3 Cursor 安装路径

路径解析由 scripts/Resolve-CursorPath.ps1 完成，apply.ps1 / rollback.ps1 共用同一逻辑。

解析优先级（从高到低）：

1. 参数 -CursorPath
2. 环境变量 CURSOR_WORKBENCH_CSS
3. 自动探测 → 去重 → 交互选择

自动探测来源：%LOCALAPPDATA%\Programs\cursor、各盘符 Program Files / Program Files (x86)、Get-Command cursor、开始菜单 .lnk、注册表卸载项。

交互行为：

候选数	行为
1	打印路径并直接使用
≥2	编号列表，输入编号选择（q 退出）
0	粘贴安装根或 CSS 全路径；或输入F 打开文件对话框

显式指定路径（跳过探测）：

# 参数：安装根或 CSS 全路径
powershell -ExecutionPolicy Bypass -File .\apply.ps1 -CursorPath "D:\Program Files\cursor"

# 环境变量
$env:CURSOR_WORKBENCH_CSS = "D:\Program Files\cursor\resources\app\out\vs\workbench\workbench.desktop.main.css"
powershell -ExecutionPolicy Bypass -File .\apply.ps1

非交互 -NonInteractive：唯一候选时直接用；零或多候选时列出路径并以非零退出码失败（适合 CI / 批处理）。

6.4 回滚

powershell -ExecutionPolicy Bypass -File .\rollback.ps1

路径选择与 apply.ps1 相同，支持 -CursorPath、环境变量与 -NonInteractive。

6.5 对齐配色与清晰度（可选）

1. 安装主题：

cursor --install-extension zhuangtongfa.material-theme
cursor --install-extension vscode-icons-team.vscode-icons

2. 合并 snippets/settings.snippet.json 到 %APPDATA%\Cursor\User\settings.json。

7. 核心 CSS 说明

样式文件：styles/onedark-modern-ui.css

关键能力：

• 工作台背景略深，衬托「卡片」间隙
• sidebar / panel / auxiliarybar / editor：margin + border + border-radius: 8px
• 编辑器内容区与 Tab：圆角
• 输入框、快捷面板、Hover、Suggest：圆角
• 列表行圆角
• sash 悬停色对齐 One Dark Pro 蓝 #61afef

可按主题自行改背景色、边框透明度、圆角半径。

8. 维护与排障

情况	处理
Cursor 大版本更新后圆角消失	再跑一次apply.ps1
apply 报找不到 CSS / 多安装选错	用-CursorPath 或 CURSOR_WORKBENCH_CSS 指定；多安装时按编号选择
CI / 批处理需固定路径	优先-CursorPath 指定路径；仅单一安装时可加 -NonInteractive
apply 报权限不足	用有写权限的终端，或以管理员运行
想彻底还原	rollback.ps1
仍觉得发白	检查是否有过浅的 semantic token 自定义色

9. 风险与边界

• 修改安装目录属于非官方行为，升级可能覆盖。
• 不同 Cursor 版本 DOM/CSS 类名若变化，选择器可能需要微调。
• 不建议与多个 CSS 注入扩展同时强改同一套布局，以免互相覆盖。

10. 参考

• VS Code Modern UI：workbench.experimental.modernUI
• VS Code 源码（概念参考）：floatingPanels.css、roundedCorners.css、editorBorder.css
• 主题：One Dark Pro（zhuangtongfa.material-theme）

---

结论：颜色用主题同步；圆角卡片布局在 Cursor 上需额外 CSS 注入。本包把「注入 / 回滚 / 清晰度设置」做成可复制分发的工具箱，方便团队内复用。

下载地址

https://github.com/StartNight/cursor-modern-ui-corners