进阶篇：从单体到工程化：VS Code 主题进阶构建指南

npm install --save-dev js-yaml

your-theme/
├── src/
│   ├── core/
│   │   └── colors.yaml          # 颜色变量（主色、背景、文本等）
│   ├── languages/                # 各语言的语法规则
│   │   ├── base.yaml             # 跨语言通用规则
│   │   ├── javascript.yaml
│   │   ├── typescript.yaml
│   │   ├── python.yaml
│   │   ├── html.yaml
│   │   ├── css.yaml
│   │   └── ... (其他语言)
│   ├── special/                   # 特殊规则（如 Better Comments）
│   │   └── better-comments.yaml
│   ├── workbench.yaml             # UI 颜色（colors 对象）
│   └── semantic.yaml              # 语义高亮（semanticTokenColors）
├── scripts/
│   └── build.js                   # 构建脚本
├── themes/
│   └── your-theme.json            # 构建生成的最终文件（根据你的主题名修改）
├── package.json
└── .vscodeignore

# 核心颜色变量
primary: "#3b82f6" # 主蓝
success: "#34d399" # 成功绿
warning: "#fbbf24" # 警告黄
error: "#f87171" # 错误红
highlight: "#7dd3fc" # 发光蓝

bg: "#0f172a" # 背景
bgMuted: "#1e293b" # 次级背景
text: "#e2e8f0" # 前景色
textMuted: "#94a3b8" # 辅助文字
border: "#2d3748" # 边框


# ... 其他变量

# 通用规则
tokenColors:
  - name: Comment
    scope: ["comment", "punctuation.definition.comment"]
    settings:
      fontStyle: "italic"
      foreground: "${comment}"

  - name: Keyword
    scope: ["keyword", "storage.type", "storage.modifier"]
    settings:
      foreground: "${primary}"
      fontStyle: "bold"

  - name: String
    scope: ["string", "string.quoted.single", "string.quoted.double"]
    settings:
      foreground: "${success}"
  # ... 其他通用规则

# JavaScript 专用规则
tokenColors:
  - name: JSX Tag
    scope: ["entity.name.tag.jsx", "meta.tag.jsx"]
    settings:
      foreground: "${function}"

# 编辑器 UI 颜色
editor.background: "${bg}"
editor.foreground: "${text}"
titleBar.activeBackground: "${bg}"
titleBar.activeForeground: "${text}"
statusBar.background: "${bg}"
statusBar.foreground: "${textMuted}"
# ... 所有 UI 键

# 语义高亮规则
variable: "${variable}"
function: "${function}"
class: "${warning}"
"*.decorator":
  foreground: "${purple}"
  fontStyle: "italic"
# ... 其他语义规则

const fs = require("fs");
const yaml = require("js-yaml");
const path = require("path");

const ROOT_DIR = path.resolve(__dirname, "..");

// 路径配置
const COLOR_FILE = path.join(ROOT_DIR, "src", "core", "colors.yaml");
const WORKBENCH_FILE = path.join(ROOT_DIR, "src", "workbench.yaml");
const SEMANTIC_FILE = path.join(ROOT_DIR, "src", "semantic.yaml");
const LANG_DIR = path.join(ROOT_DIR, "src", "languages");
const SPECIAL_DIR = path.join(ROOT_DIR, "src", "special");
const OUTPUT_FILE = path.join(ROOT_DIR, "themes", "your-theme.json"); // 改为你的主题名

// 加载颜色变量
const colors = yaml.load(fs.readFileSync(COLOR_FILE, "utf8"));

// 递归替换函数（支持透明度后缀）
function replaceVariables(obj) {
  if (typeof obj === "string") {
    return obj.replace(/\$\{(\w+)\}([0-9a-fA-F]{2})?/g, (match, key, alpha) => {
      if (colors[key] !== undefined) {
        return colors[key] + (alpha || "");
      }
      console.warn(`警告: 变量 "${key}" 未定义，保留原样`);
      return match;
    });
  }
  if (Array.isArray(obj)) {
    return obj.map(replaceVariables);
  }
  if (obj && typeof obj === "object") {
    const result = {};
    for (const [k, v] of Object.entries(obj)) {
      result[k] = replaceVariables(v);
    }
    return result;
  }
  return obj;
}

// 加载并替换 UI 颜色
const workbench = yaml.load(fs.readFileSync(WORKBENCH_FILE, "utf8"));
const uiColors = replaceVariables(workbench);

// 加载并替换语义规则
const semantic = yaml.load(fs.readFileSync(SEMANTIC_FILE, "utf8"));
const semanticColors = replaceVariables(semantic);

// 收集语言规则（按顺序合并，后合并的优先级更高）
const order = [
  "base.yaml",
  "html.yaml",
  "css.yaml",
  "javascript.yaml",
  "typescript.yaml",
  "vue.yaml",
  "json.yaml",
  "markdown.yaml",
  "python.yaml",
  "jsdoc.yaml",
  // 如果还有更多，请按需添加
];

let tokenColors = [];

order.forEach((file) => {
  const filePath = path.join(LANG_DIR, file);
  if (fs.existsSync(filePath)) {
    try {
      const langRules = yaml.load(fs.readFileSync(filePath, "utf8"));
      if (langRules?.tokenColors) {
        tokenColors = tokenColors.concat(langRules.tokenColors);
      }
    } catch (err) {
      console.error(`解析 ${file} 失败:`, err.message);
    }
  } else {
    console.warn(`文件 ${file} 不存在，跳过`);
  }
});

// 加载特殊注释规则（如 Better Comments）
const specialFile = path.join(SPECIAL_DIR, "better-comments.yaml");
if (fs.existsSync(specialFile)) {
  const specialRules = yaml.load(fs.readFileSync(specialFile, "utf8"));
  if (specialRules?.tokenColors) {
    tokenColors = tokenColors.concat(specialRules.tokenColors);
    console.log("✅ 已加载特殊注释规则");
  }
}

const processedTokenColors = replaceVariables(tokenColors);

// 确保输出目录存在
const outputDir = path.dirname(OUTPUT_FILE);
if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
}

// 构建最终主题对象
const newTheme = {
  name: "Your Theme Name", // 改为你的主题显示名
  type: "dark", // 根据实际主题类型改为 "light" 或 "dark"
  colors: uiColors,
  tokenColors: processedTokenColors,
  semanticTokenColors: semanticColors,
};

// 写入文件
fs.writeFileSync(OUTPUT_FILE, JSON.stringify(newTheme, null, 2));
console.log("✅ 主题构建完成！");

{
  "scripts": {
    "build": "node scripts/build.js",
    "prepublishOnly": "npm run build"
  }
}

.vscode/**
.gitignore
vsc-extension-quickstart.md
node_modules
pnpm-lock.yaml
src/**
scripts/**
!themes/*.json

npm run build