答案：通过创建JSON配置文件可自定义VSCode主题和图标，首先生成基础配色方案，在扩展目录下定义colors和tokenColors设置UI颜色与语法高亮，再通过iconDefinitions、fileExtensions等字段配置图标映射，最后在package.json中注册图标主题并启动开发主机预览效果。

想让 VSCode 看起来更符合你的审美或工作习惯？完全可以自己动手做一个专属主题和图标方案。不需要依赖别人的设计，掌握基本结构后，调整颜色、字体高亮甚至文件图标都变得很简单。

创建自定义主题

VSCode 主题本质上是一个 JSON 配置文件，定义了编辑器各个界面元素的颜色。你可以在用户设置目录中新建一个主题文件，也可以通过扩展方式发布。

• 打开命令面板（Ctrl+Shift+P），输入 "Developer: Generate Color Theme from Current Settings" 可快速基于当前主题生成基础配置
• 在 ~/.vscode/extensions/ 下创建自己的扩展文件夹，例如 my-theme/
• 新建 themes/my-theme-color-theme.json 文件，内容结构如下：

{ "name": "My Custom Theme", "type": "dark", // 或 "light" "colors": { "editor.background": "#1e1e1e", "editor.foreground": "#d4d4d4", "tab.activeBackground": "#252526", "statusBar.background": "#007acc" }, "tokenColors": [ { "name": "Comment", "scope": "comment", "settings": { "foreground": "#608B4E", "fontStyle": "italic" } } ] }

colors 控制 UI 元素颜色，tokenColors 定义代码语法高亮规则。scope 支持 TextMate 语法范围，比如 string、keyword、variable 等。

配置图标方案

文件图标由独立的图标主题控制。你可以修改现有图标集，或引用本地 SVG 图标构建自己的方案。

arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

• 在扩展根目录创建 icons/ 文件夹存放 SVG 图标
• 创建 icons/my-icon-theme.json 文件，示例结构：

{ "iconDefinitions": { "_file": { "iconPath": "./icons/file.svg" }, "js": { "iconPath": "./icons/js.svg" } }, "fileExtensions": { "js": "js", "jsx": "js" }, "fileNames": { "package.json": "json" }, "folderNames": { "src": "src-folder" } }

在 package.json 中注册图标主题：

{ "contributes": { "icons": [ { "id": "my-icons", "label": "My Icons", "path": "./icons/my-icon-theme.json" } ] } }

调试与应用

写完配置后无需打包即可预览效果。

• 按 F5 启动扩展开发主机，新窗口会加载你的主题和图标
• 使用 "Preferences: Color Theme" 和 "File Icon Theme" 切换到你的方案
• 修改 JSON 文件后重启开发窗口即可看到更新
• 确认无误后可将整个文件夹压缩为 .vsix 发布或备份

基本上就这些。主题和图标都是 JSON 驱动，没有复杂逻辑。关键是熟悉 color name 和 scope 的命名规则。官方文档有完整列表，照着改就行。不复杂但容易忽略细节，比如路径写错或 scope 拼写偏差会导致样式不生效。多试几次就顺了。