如何为VSCode添加自定义主题？

技术教程
2025-10-08 14:38:02

可通过安装扩展、手动添加JSON文件或使用Yeoman生成器创建主题。首先安装现成主题扩展并从颜色主题列表中选择应用；其次将自定义主题JSON文件放入用户themes目录后在命令面板中启用；最后可用yo code生成项目开发发布主题，需编辑配色文件并预览效果。

如何为vscode添加自定义主题？

为 VSCode 添加自定义主题有几种方式，最常见的是通过安装现成的主题扩展或自己创建一个个性化主题。以下是具体操作方法：

使用已有的自定义主题（通过扩展）

很多开发者已经制作了丰富的主题并发布在 VSCode 扩展市场，你可以直接安装使用：

打开 VSCode，点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）
在搜索框中输入关键词如“theme”，或者直接搜索你喜欢的主题名称，比如 “Dracula”、“One Dark Pro” 等
找到后点击“Install”安装
安装完成后，按下 Ctrl+Shift+P 打开命令面板，输入 “Preferences: Color Theme”
从列表中选择你刚安装的主题即可应用

手动添加自定义主题文件

如果你有一个别人分享的主题 JSON 文件，或者想自己写一个，可以手动添加：

KGOGOMALL

主要功能：无限级分类，可自由调整分类位置，商品可在各分类间自由转移；商品组合：可以为每种商品添加多种选项，方便顾客购买选择，比如：一件衣服顾客可以选择款式、花色、大小等，笔记本电脑，可以有cpu、内存、显示屏、硬盘等等扩展属性；会员分级功能，会员积分功能。可根据会员积分自行设定用户组，管理员可自行定义会员获得积分的方式：按订单总金额或者按单个商品给予积分；按照商品类别查看热卖、特价，允

0 查看详情 KGOGOMALL

找到 VSCode 的用户主题目录：
- Windows: %APPDATA%\Code\User\themes\
- macOS: ~/Library/Application Support/Code/User/themes/
- Linux: ~/.config/Code/User/themes/
在该目录下创建一个 JSON 文件，例如 my-custom-theme.json
文件内容需符合 VSCode 主题格式，基本结构如下：

{
  "name": "My Custom Theme",
  "type": "dark",  // 或 "light"
  "colors": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#ffffff"
    // 其他颜色配置...
  },
  "tokenColors": [
    {
      "scope": "keyword",
      "settings": {
        "foreground": "#ff0000",
        "fontStyle": "bold"
      }
    }
    // 可继续添加语法高亮规则
  ]
}

保存后重启 VSCode，然后在命令面板中执行 “Preferences: Color Theme”，你的主题就会出现在列表中。