构建自定义VSCode主题与图标方案-VSCode-PHP中文网

构建自定义VSCode主题与图标方案

夜晨

发布： 2025-11-15 23:01:02

原创

432人浏览过

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

构建自定义vscode主题与图标方案

想让 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 图标构建自己的方案。

快标书AI

10分钟生成投标方案

241

查看详情

在扩展根目录创建 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" } ] } }