VSCode主题：自定义主题制作-VSCode-PHP中文网

VSCode主题：自定义主题制作

betcha

发布： 2025-10-28 17:41:02

原创

808人浏览过

先创建配色主题项目并配置package.json，再定义themes目录下的JSON文件，通过colors设置UI颜色、tokenColors调整语法高亮，最后按F5调试预览效果。

vscode主题：自定义主题制作

想让 VSCode 看起来更符合自己的审美或使用习惯？自定义主题是个好选择。不需要从零开始，VSCode 提供了完整的机制让你轻松创建和修改主题。下面一步步带你实现属于你自己的代码主题。

理解 VSCode 主题类型

VSCode 支持三种主要的自定义界面颜色类型：

Color Theme（配色主题）：控制编辑器语法高亮、侧边栏、状态栏等 UI 颜色。
File Icon Theme（文件图标主题）：定义资源管理器中不同文件类型的图标样式。
Product Icon Theme（产品图标主题）：更改工具栏、操作按钮等内置图标的外观。

本文重点讲 Color Theme 的制作。

创建一个基础配色主题

打开你的项目文件夹或新建一个用于存放主题的目录，然后执行以下步骤：

运行 npm init -y 初始化项目（可选，便于发布到插件市场）。
创建 package.json 并添加 contributes 字段来声明主题。
在项目中新建 themes/ 文件夹，并添加你的主题文件，例如 my-theme-color-theme.json。

示例 package.json 配置：

<font face="Courier New">
{
  "name": "my-custom-theme",
  "displayName": "My Custom Theme",
  "description": "A personalized dark theme",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.80.0"
  },
  "contributes": {
    "themes": [
      {
        "label": "My Custom Theme",
        "uiTheme": "vs-dark",
        "path": "./themes/my-theme-color-theme.json"
      }
    ]
  }
}

登录后复制

说明：

Article Forge

行业文案AI写作软件，可自动为特定主题或行业生成内容

查看详情

label 是你在 VSCode 中看到的主题名称。
uiTheme 决定整体界面风格：vs-dark（深色）、vs（浅色）、hc-black（高对比度）。
path 指向你的主题 JSON 文件。

编写主题 JSON 文件

主题的核心是定义各种作用域的颜色。你可以覆盖编辑器背景、字体颜色、括号高亮、侧边栏样式等。

示例 my-theme-color-theme.json：

<font face="Courier New">
{
  "name": "My Custom Theme",
  "type": "dark",
  "colors": {
    "editor.background": "#1e1e2e",
    "editor.foreground": "#cdd6f4",
    "statusBar.background": "#181825",
    "sideBar.background": "#1e1e2e",
    "tab.activeBackground": "#1e1e2e",
    "activityBar.background": "#181825"
  },
  "tokenColors": [
    {
      "scope": ["comment", "punctuation.definition.comment"],
      "settings": {
        "foreground": "#6c7086",
        "fontStyle": "italic"
      }
    },
    {
      "scope": "string",
      "settings": {
        "foreground": "#a6e3a1"
      }
    },
    {
      "scope": "keyword",
      "settings": {
        "foreground": "#f38ba8",
        "fontStyle": "bold"
      }
    },
    {
      "scope": "variable",
      "settings": {
        "foreground": "#cba6f7"
      }
    }
  ]
}

登录后复制

关键字段解释：

colors：控制 UI 元素颜色，比如编辑器背景、状态栏等。
tokenColors：控制代码语法着色，通过 scope 匹配语言标记（如 keyword、string），settings 定义颜色和字体样式。
scope 可以是单一值或数组，支持通配符和嵌套结构（参考 TextMate 语法）。