VS Code 主题扩展：利用脚本生成优化配置管理

my-theme-extension/
├── src/
│   ├── colors.js           // 定义基础颜色和派生颜色
│   ├── uiColors.js         // 定义 VS Code UI 界面颜色
│   ├── tokenColors.js      // 定义语法高亮颜色
│   └── index.js            // 组合所有部分并导出最终主题对象
├── themes/
│   └── my-theme.json       // 最终生成的 JSON 主题文件
├── package.json
└── build.js                // 构建脚本，负责生成 themes/my-theme.json

// src/colors.js
const baseColors = {
    // 主色调
    primary: '#007ACC', // VS Code 蓝色
    accent: '#6A9955',  // 绿色，用于强调

    // 基础文本与背景
    background: '#1E1E1E', // 深色背景
    foreground: '#D4D4D4', // 前景文本色

    // 状态色
    error: '#F44747',
    warning: '#CCA700',
    info: '#3399FF',
};

// 派生颜色示例：通过修改透明度或亮度生成
const derivedColors = {
    activeBackground: `${baseColors.primary}33`, // 主色加透明度
    hoverBackground: '#2A2D2E', // 鼠标悬停背景
    selectionBackground: '#264F78', // 选中背景
    commentForeground: '#858585', // 注释颜色，比前景色稍暗
};

module.exports = { ...baseColors, ...derivedColors };

// src/uiColors.js
const colors = require('./colors');

module.exports = {
    // 整体工作台颜色
    "editor.background": colors.background,
    "editor.foreground": colors.foreground,
    "editorLineNumber.foreground": "#858585",
    "editorCursor.foreground": colors.foreground,
    "editor.selectionBackground": colors.selectionBackground,
    "editor.inactiveSelectionBackground": "#3A3D41",
    "editor.wordHighlightBackground": "#575757",
    "editor.wordHighlightStrongBackground": "#004972",
    "editorGroupHeader.tabsBackground": "#252526",
    "tab.activeBackground": colors.background,
    "tab.inactiveBackground": "#2D2D2D",
    "tab.activeForeground": colors.foreground,
    "tab.inactiveForeground": "#858585",

    // 侧边栏/面板颜色
    "sideBar.background": "#252526",
    "sideBar.foreground": colors.foreground,
    "panel.background": "#1E1E1E",
    "panel.border": "#3C3C3C",

    // 按钮颜色
    "button.background": colors.primary,
    "button.foreground": "#FFFFFF",
    "button.hoverBackground": "#0064B8",

    // 列表/树颜色
    "list.hoverBackground": colors.hoverBackground,
    "list.activeSelectionBackground": colors.selectionBackground,
    "list.inactiveSelectionBackground": "#37373D",

    // ... 更多 UI 颜色定义
};

// src/tokenColors.js
const colors = require('./colors');

module.exports = [
    {
        name: "注释",
        scope: "comment",
        settings: {
            foreground: colors.commentForeground,
            fontStyle: "italic"
        }
    },
    {
        name: "字符串",
        scope: "string",
        settings: {
            foreground: colors.accent // 使用绿色强调字符串
        }
    },
    {
        name: "关键字",
        scope: "keyword",
        settings: {
            foreground: colors.primary
        }
    },
    {
        name: "数字",
        scope: "constant.numeric",
        settings: {
            foreground: "#B5CEA8"
        }
    },
    {
        name: "函数名",
        scope: "entity.name.function",
        settings: {
            foreground: "#DCDCAA"
        }
    },
    {
        name: "变量",
        scope: "variable",
        settings: {
            foreground: colors.foreground
        }
    },
    // ... 更多语法高亮规则
];

// src/index.js
const uiColors = require('./uiColors');
const tokenColors = require('./tokenColors');
const colors = require('./colors'); // 引入基础颜色，如果需要在主题元数据中使用

const theme = {
    $schema: "vscode://schemas/color-theme", // 必填，用于 VS Code 校验
    type: "dark", // 或 "light"
    name: "My Custom Theme", // 主题名称

    colors: uiColors,
    tokenColors: tokenColors,
    // 如果有语义高亮规则，可以在这里添加
    // semanticHighlighting: true,
    // semanticTokenColors: { ... }
};

module.exports = theme;

// build.js
const fs = require('fs');
const path = require('path');
const theme = require('./src/index'); // 导入最终的主题对象

const outputDir = path.join(__dirname, 'themes');
const outputFile = path.join(outputDir, 'my-theme.json');

// 确保输出目录存在
if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir);
}

// 将 JavaScript 对象转换为格式化的 JSON 字符串并写入文件
fs.writeFileSync(outputFile, JSON.stringify(theme, null, 2), 'utf-8');

console.log(`主题 JSON 文件已成功生成到: ${outputFile}`);

{
  "name": "my-theme-extension",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.50.0"
  },
  "categories": [
    "Themes"
  ],
  "contributes": {
    "themes": [
      {
        "label": "My Custom Theme",
        "uiTheme": "vs-dark",
        "path": "./themes/my-theme.json"
      }
    ]
  },
  "scripts": {
    "build": "node build.js",
    "watch": "nodemon --watch src --ext js --exec \"npm run build\"" // 可选：用于开发时自动构建
  },
  "devDependencies": {
    "nodemon": "^2.0.7" // 如果使用 watch 脚本，需要安装 nodemon
  }
}