VS Code主题开发：告别JSON，拥抱脚本化生成

my-custom-theme-extension/
├── src/
│   └── theme-generator.ts   # 主题生成逻辑
├── themes/
│   └── MyCustomGeneratedTheme.json # 生成的JSON主题文件 (构建后生成)
├── package.json
├── tsconfig.json
└── README.md

// src/theme-generator.ts
import * as fs from 'fs';
import * as path from 'path';

// 1. 定义颜色调色板
interface ColorPalette {
    baseBackground: string;
    baseForeground: string;
    primaryAccent: string;
    secondaryAccent: string;
    comment: string;
    string: string;
    keyword: string;
    function: string;
    error: string;
}

const palette: ColorPalette = {
    baseBackground: '#282C34', // 编辑器背景
    baseForeground: '#ABB2BF', // 默认文本颜色
    primaryAccent: '#61AFEF',  // 主要强调色 (例如：函数名、变量)
    secondaryAccent: '#E06C75', // 次要强调色 (例如：错误、特殊符号)
    comment: '#5C6370',         // 注释颜色
    string: '#98C379',          // 字符串颜色
    keyword: '#C678DD',         // 关键字颜色
    function: '#61AFEF',        // 函数名颜色
    error: '#E06C75',           // 错误颜色
};

// 辅助函数：根据基础颜色生成派生色 (这里仅为简化示例，实际可使用颜色库)
function lighten(color: string, amount: number): string {
    // 实际项目中推荐使用 'color' 或 'chroma-js' 等库进行颜色操作
    // 简化处理：这里仅返回原色，或做简单颜色调整
    return color; // 示例：直接返回原色
}

function darken(color: string, amount: number): string {
    return color; // 示例：直接返回原色
}

// 2. 构建主题颜色 (colors)
const themeColors = {
    'editor.background': palette.baseBackground,
    'editor.foreground': palette.baseForeground,
    'editorCursor.foreground': palette.primaryAccent,
    'selection.background': lighten(palette.primaryAccent, 0.2), // 选中背景色
    'widget.background': darken(palette.baseBackground, 0.1),
    'input.background': darken(palette.baseBackground, 0.05),
    'input.border': palette.comment,
    'sideBar.background': darken(palette.baseBackground, 0.05),
    'sideBar.foreground': palette.baseForeground,
    'activityBar.background': darken(palette.baseBackground, 0.1),
    'statusBar.background': darken(palette.baseBackground, 0.1),
    'statusBar.foreground': palette.baseForeground,
    'terminal.background': palette.baseBackground,
    'terminal.foreground': palette.baseForeground,
    // ... 更多主题颜色配置
    'terminal.ansiBlack': '#282C34',
    'terminal.ansiRed': '#E06C75',
    'terminal.ansiGreen': '#98C379',
    'terminal.ansiYellow': '#E5C07B',
    'terminal.ansiBlue': '#61AFEF',
    'terminal.ansiMagenta': '#C678DD',
    'terminal.ansiCyan': '#56B6C2',
    'terminal.ansiWhite': '#ABB2BF',
};

// 3. 构建语法高亮规则 (tokenColors)
const tokenColors = [
    {
        scope: ['comment', 'punctuation.definition.comment'],
        settings: {
            foreground: palette.comment,
            fontStyle: 'italic',
        },
    },
    {
        scope: 'string',
        settings: {
            foreground: palette.string,
        },
    },
    {
        scope: ['keyword', 'storage.type', 'storage.modifier'],
        settings: {
            foreground: palette.keyword,
        },
    },
    {
        scope: ['entity.name.function', 'support.function'],
        settings: {
            foreground: palette.function,
        },
    },
    {
        scope: ['variable.language', 'variable.other'],
        settings: {
            foreground: palette.baseForeground,
        },
    },
    {
        scope: ['invalid', 'illegal'],
        settings: {
            foreground: palette.error,
            fontStyle: 'underline',
        },
    },
    // ... 更多语法高亮规则
];

// 4. 组装最终的主题对象
const theme = {
    // 声明VS Code主题的JSON Schema，便于编辑器提供智能提示和验证
    $schema: 'vscode://schemas/color-theme',
    name: 'MyCustomGeneratedTheme', // 主题名称
    type: 'dark', // 主题类型: 'light' 或 'dark'
    colors: themeColors,
    tokenColors: tokenColors,
    // semanticHighlighting 可以在某些语言中提供更精确的语义高亮
    semanticHighlighting: true,
    semanticTokenColors: {
        'variable.readonly': { foreground: palette.baseForeground, fontStyle: 'italic' },
        'property.readonly': { foreground: palette.baseForeground, fontStyle: 'italic' },
        // ... 更多语义token颜色
    }
};

// 5. 输出JSON文件
const outputPath = path.join(__dirname, '..', 'themes', 'MyCustomGeneratedTheme.json');
fs.mkdirSync(path.dirname(outputPath), { recursive: true }); // 确保输出目录存在
fs.writeFileSync(outputPath, JSON.stringify(theme, null, 2), 'utf-8'); // 写入文件，null, 2 用于格式化输出

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

// package.json
{
  "name": "my-custom-theme",
  "version": "1.0.0",
  "description": "A custom VS Code theme generated with TypeScript.",
  "main": "index.js",
  "scripts": {
    "build-theme": "ts-node src/theme-generator.ts",
    "watch-theme": "nodemon --watch src --ext ts --exec \"ts-node src/theme-generator.ts\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^20.x.x",
    "ts-node": "^10.x.x",
    "typescript": "^5.x.x",
    "nodemon": "^3.x.x" // 可选：用于监听文件变化并自动重新生成
  }
}