实战：多款主题插件开发

本文开发一个完整的主题插件：一套 Dark 主题、一套 Light 主题、一套文件图标主题，从颜色设计到 JSON 编写到发布全流程。

主题规划

设计基调

统一叫 "Aurora"（极光），视觉关键词：冷静、对比清晰、低饱和：

主题	背景基调	强调色
Aurora Dark	深蓝黑 `#0f1419`	极光青 `#4ec9b0`
Aurora Light	暖白 `#fafafa`	极光蓝 `#4078f2`

色板设计

功能色在明暗两套主题间保持语义一致：

text

Dark 版：
  背景      #0f1419
  前景      #d4d4d4
  注释      #6a737d
  关键字    #c678dd
  字符串    #98c379
  函数      #61afef
  数字      #d19a66
  强调      #4ec9b0

Light 版：
  背景      #fafafa
  前景      #383a42
  注释      #a0a1a7
  关键字    #a626a4
  字符串    #50a14f
  函数      #4078f2
  数字      #986801
  强调      #0184bc

第一步：项目结构

text

aurora-theme/
 ├── package.json
 ├── README.md
 ├── themes/
 │    ├── aurora-dark.json
 │    └── aurora-light.json
 └── icons/
      ├── aurora-icons.json
      └── svg/          图标源文件

第二步：package.json

json

{
  "name": "aurora-theme",
  "displayName": "Aurora Theme",
  "description": "极光配色主题套装：暗色、亮色与文件图标",
  "version": "1.0.0",
  "publisher": "mypublisher",
  "license": "MIT",
  "engines": { "vscode": "^1.80.0" },
  "categories": ["Themes"],
  "keywords": ["theme", "dark", "light", "aurora", "icons"],
  "contributes": {
    "themes": [
      {
        "label": "Aurora Dark",
        "uiTheme": "vs-dark",
        "path": "./themes/aurora-dark.json"
      },
      {
        "label": "Aurora Light",
        "uiTheme": "vs",
        "path": "./themes/aurora-light.json"
      }
    ],
    "iconThemes": [
      {
        "id": "aurora-icons",
        "label": "Aurora Icons",
        "path": "./icons/aurora-icons.json"
      }
    ]
  }
}

第三步：Aurora Dark 主题

json

{
  "name": "Aurora Dark",
  "type": "dark",
  "colors": {
    "editor.background": "#0f1419",
    "editor.foreground": "#d4d4d4",
    "editor.lineHighlightBackground": "#151b22",
    "editor.selectionBackground": "#2a3441",
    "editorCursor.foreground": "#4ec9b0",
    "editorLineNumber.foreground": "#3f4a55",
    "editorLineNumber.activeForeground": "#8a94a0",
    "editorIndentGuide.background": "#1b232c",
    "editorWidget.background": "#161d26",
    "editorHoverWidget.background": "#161d26",
    "editorSuggestWidget.background": "#161d26",

    "sideBar.background": "#0b1014",
    "sideBar.foreground": "#d4d4d4",
    "sideBarSectionHeader.background": "#0b1014",
    "titleBar.activeBackground": "#0b1014",
    "titleBar.activeForeground": "#d4d4d4",
    "statusBar.background": "#0b1014",
    "statusBar.foreground": "#d4d4d4",
    "activityBar.background": "#0b1014",
    "activityBar.foreground": "#d4d4d4",
    "activityBarBadge.background": "#4ec9b0",
    "activityBarBadge.foreground": "#0b1014",

    "tab.activeBackground": "#0f1419",
    "tab.activeForeground": "#d4d4d4",
    "tab.activeBorderTop": "#4ec9b0",
    "tab.inactiveBackground": "#0b1014",
    "tab.inactiveForeground": "#6a737d",

    "list.hoverBackground": "#161d26",
    "list.activeSelectionBackground": "#1f6feb",
    "list.activeSelectionForeground": "#ffffff",
    "list.highlightForeground": "#4ec9b0",

    "input.background": "#0b1014",
    "input.foreground": "#d4d4d4",
    "button.background": "#1f6feb",
    "button.foreground": "#ffffff",
    "button.hoverBackground": "#388bfd",

    "terminal.ansiCyan": "#4ec9b0"
  },
  "tokenColors": [
    { "scope": "comment", "settings": { "foreground": "#6a737d", "fontStyle": "italic" } },
    { "scope": "string", "settings": { "foreground": "#98c379" } },
    { "scope": "keyword, storage.type, constant.language", "settings": { "foreground": "#c678dd" } },
    { "scope": "keyword.operator", "settings": { "foreground": "#4ec9b0" } },
    { "scope": "constant.numeric", "settings": { "foreground": "#d19a66" } },
    { "scope": "entity.name.function, support.function", "settings": { "foreground": "#61afef" } },
    { "scope": "variable", "settings": { "foreground": "#d4d4d4" } },
    { "scope": "variable.parameter", "settings": { "foreground": "#d4d4d4" } },
    { "scope": "punctuation", "settings": { "foreground": "#6a737d" } }
  ],
  "semanticTokenColors": {
    "parameter": "#d4d4d4",
    "variable": "#d4d4d4",
    "function": "#61afef",
    "type": "#e5c07b",
    "keyword": "#c678dd",
    "string": "#98c379",
    "number": "#d19a66",
    "boolean": "#c678dd"
  }
}

第四步：Aurora Light 主题

json

{
  "name": "Aurora Light",
  "type": "light",
  "colors": {
    "editor.background": "#fafafa",
    "editor.foreground": "#383a42",
    "editor.lineHighlightBackground": "#f0f0f0",
    "editor.selectionBackground": "#d7dff0",
    "editorCursor.foreground": "#0184bc",
    "editorLineNumber.foreground": "#c8c8c8",
    "editorLineNumber.activeForeground": "#6a6a6a",
    "editorIndentGuide.background": "#e8e8e8",

    "sideBar.background": "#f2f2f2",
    "sideBar.foreground": "#383a42",
    "titleBar.activeBackground": "#f2f2f2",
    "titleBar.activeForeground": "#383a42",
    "statusBar.background": "#f2f2f2",
    "statusBar.foreground": "#383a42",
    "activityBar.background": "#f2f2f2",
    "activityBar.foreground": "#383a42",
    "activityBarBadge.background": "#4078f2",
    "activityBarBadge.foreground": "#ffffff",

    "tab.activeBackground": "#fafafa",
    "tab.activeForeground": "#383a42",
    "tab.activeBorderTop": "#4078f2",
    "tab.inactiveBackground": "#f2f2f2",
    "tab.inactiveForeground": "#a0a1a7",

    "list.hoverBackground": "#f0f0f0",
    "list.activeSelectionBackground": "#4078f2",
    "list.activeSelectionForeground": "#ffffff",
    "list.highlightForeground": "#0184bc",

    "input.background": "#ffffff",
    "input.foreground": "#383a42",
    "button.background": "#4078f2",
    "button.foreground": "#ffffff",
    "button.hoverBackground": "#2c5fd8"
  },
  "tokenColors": [
    { "scope": "comment", "settings": { "foreground": "#a0a1a7", "fontStyle": "italic" } },
    { "scope": "string", "settings": { "foreground": "#50a14f" } },
    { "scope": "keyword, storage.type, constant.language", "settings": { "foreground": "#a626a4" } },
    { "scope": "keyword.operator", "settings": { "foreground": "#0184bc" } },
    { "scope": "constant.numeric", "settings": { "foreground": "#986801" } },
    { "scope": "entity.name.function, support.function", "settings": { "foreground": "#4078f2" } },
    { "scope": "variable", "settings": { "foreground": "#383a42" } },
    { "scope": "variable.parameter", "settings": { "foreground": "#383a42" } },
    { "scope": "punctuation", "settings": { "foreground": "#a0a1a7" } }
  ],
  "semanticTokenColors": {
    "parameter": "#383a42",
    "variable": "#383a42",
    "function": "#4078f2",
    "type": "#c18401",
    "keyword": "#a626a4",
    "string": "#50a14f",
    "number": "#986801"
  }
}

第五步：文件图标主题

icons/aurora-icons.json：

json

{
  "iconDefinitions": {
    "_file": { "iconPath": "./svg/file.svg" },
    "_folder": { "iconPath": "./svg/folder.svg" },
    "_folder_open": { "iconPath": "./svg/folder-open.svg" },
    "_root_folder": { "iconPath": "./svg/root-folder.svg" },
    "_root_folder_open": { "iconPath": "./svg/root-folder-open.svg" },
    "_js": { "iconPath": "./svg/javascript.svg" },
    "_ts": { "iconPath": "./svg/typescript.svg" },
    "_json": { "iconPath": "./svg/json.svg" },
    "_md": { "iconPath": "./svg/markdown.svg" },
    "_html": { "iconPath": "./svg/html.svg" },
    "_css": { "iconPath": "./svg/css.svg" },
    "_py": { "iconPath": "./svg/python.svg" },
    "_gitignore": { "iconPath": "./svg/git.svg" },
    "_folder_src": { "iconPath": "./svg/folder-src.svg" },
    "_folder_src_open": { "iconPath": "./svg/folder-src-open.svg" }
  },
  "fileExtensions": {
    "js": "_js",
    "mjs": "_js",
    "cjs": "_js",
    "ts": "_ts",
    "json": "_json",
    "md": "_md",
    "html": "_html",
    "css": "_css",
    "py": "_py"
  },
  "fileNames": {
    "package.json": "_json",
    "tsconfig.json": "_ts",
    ".gitignore": "_gitignore"
  },
  "folderNames": {
    "src": "_folder_src"
  },
  "folderNamesExpanded": {
    "src": "_folder_src_open"
  },
  "languageIds": {
    "javascript": "_js",
    "typescript": "_ts",
    "json": "_json",
    "markdown": "_md",
    "html": "_html",
    "css": "_css",
    "python": "_py"
  }
}

SVG 图标示例

svg

<!-- svg/javascript.svg：JS 图标（16x16） -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
  <rect x="2" y="2" width="12" height="12" rx="2" fill="#2b2726"/>
  <text x="8" y="11.5" font-size="9" font-family="monospace" fill="#f7df1e" text-anchor="middle" font-weight="bold">JS</text>
</svg>

svg

<!-- svg/folder.svg：文件夹图标 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
  <path fill="#4ec9b0" d="M1.5 3.5h4l1.5 2h7.5v7.5a1 1 0 0 1-1 1h-12a1 1 0 0 1-1-1v-8.5a1 1 0 0 1 1-1z"/>
</svg>

第六步：测试与调试

开发宿主预览

text

1. F5 启动扩展开发宿主
2. Ctrl+K Ctrl+T 选择 "Aurora Dark"/"Aurora Light"
3. 打开 TS/JS/MD 文件检查高亮
4. 命令面板 → Preferences: File Icon Theme → Aurora Icons
5. 检查资源管理器图标与文件夹展开态
6. Developer: Inspect Editor Tokens and Scopes 核对配色

兼容性检查

检查	方法
高对比度模式	切换系统高对比度验证可读性
深色/浅色终端	终端检查 ANSI 颜色对比
亮色主题下图标可见度	白背景下图标是否清晰

第七步：打包与发布

text

# 打包
vsce package

# 预览包内容
vsce ls

# 发布
vsce publish

发布前完善 README 与截图：

markdown

# Aurora Theme

极光配色主题套装：暗色 + 亮色 + 文件图标。

## 预览

| Dark | Light |
|------|-------|
| ![Dark](images/dark.png) | ![Light](images/light.png) |

## 安装

1. 扩展面板搜索 "Aurora Theme"
2. Ctrl+K Ctrl+T 选择 Aurora Dark/Light
3. Preferences: File Icon Theme 选择 Aurora Icons

完整流程回顾

text

设计色板 → 编写 Dark/Light JSON → 编写图标 SVG 与映射
  → package.json 注册三类贡献点
  → 开发宿主预览调试
  → vsce package 打包
  → vsce publish 发布
  → README/截图运营

这套流程产出了一个包含暗色、亮色与文件图标的三合一主题插件。所有贡献点（themes/iconThemes）都围绕同一份 JSON 语法体系，掌握后可以快速衍生更多主题变体。

实战：多款主题插件开发 ​

主题规划 ​

设计基调 ​

色板设计 ​

第一步：项目结构 ​

第二步：package.json ​

第三步：Aurora Dark 主题 ​

第四步：Aurora Light 主题 ​

第五步：文件图标主题 ​

SVG 图标示例 ​

第六步：测试与调试 ​

开发宿主预览 ​

兼容性检查 ​

第七步：打包与发布 ​

完整流程回顾 ​

实战：多款主题插件开发

主题规划

设计基调

色板设计

第一步：项目结构

第二步：package.json

第三步：Aurora Dark 主题

第四步：Aurora Light 主题

第五步：文件图标主题

SVG 图标示例

第六步：测试与调试

开发宿主预览

兼容性检查

第七步：打包与发布

完整流程回顾