VS Code 主题开发进阶：利用JS/TS动态生成主题JSON的实践指南

my-theme-extension/
├── src/
│   ├── colors.ts             // 定义基础颜色和派生颜色
│   └── theme-generator.ts    // 主题生成脚本，负责组合颜色和规则，并输出JSON
├── themes/
│   └── MyGeneratedTheme.json // 生成的目标JSON文件
├── package.json              // 项目配置、脚本命令和VS Code扩展配置
├── tsconfig.json             // TypeScript 配置文件
└── .vscode/
    └── launch.json           // (可选) 调试配置

// src/colors.ts

/**
 * 基础颜色定义，方便集中管理和调整。
 * 可以使用CSS变量命名约定，或者更具描述性的名称。
 */
export const baseColors = {
    // UI 基础色
    '--color-background-primary': '#1E1E1E', // 主背景色
    '--color-text-primary': '#D4D4D4',       // 主文本色
    '--color-accent': '#007ACC',             // 强调色 (例如：链接、选中项)
    '--color-border': '#3C3C3C',             // 边框色

    // 语法高亮基础色
    '--syntax-comment': '#6A9955',           // 注释
    '--syntax-keyword': '#C586C0',           // 关键字
    '--syntax-string': '#CE9178',            // 字符串
    '--syntax-number': '#B5CEA8',            // 数字
    '--syntax-function': '#DCDCAA',          // 函数名
    '--syntax-variable': '#9CDCFE',          // 变量名
};

/**
 * 颜色辅助函数（简化示例，实际项目中可使用如 'color' 或 'chroma-js' 库）
 * @param hexColor 原始十六进制颜色
 * @param factor 调整因子 (例如 0.1 表示变亮10%)
 * @returns 调整后的颜色
 */
function lighten(hexColor: string, factor: number): string {
    // 实际项目中会进行颜色解析和计算
    // 这是一个简化占位符，仅作演示
    return hexColor; // 示例中不进行实际计算
}

/**
 * 派生颜色，基于基础颜色进行调整。
 */
export const derivedColors = {
    // 编辑器背景，基于主背景色
    'editor.background': baseColors['--color-background-primary'],
    // 编辑器前景，基于主文本色
    'editor.foreground': baseColors['--color-text-primary'],
    // 选中背景，基于强调色进行调整
    'editor.selectionBackground': lighten(baseColors['--color-accent'], 0.2),
    // 行号颜色
    'editorLineNumber.foreground': '#858585',
    // ... 更多派生颜色
};

// src/theme-generator.ts

import * as fs from 'fs';
import * as path from 'path';
import { baseColors, derivedColors } from './colors'; // 导入颜色定义

const themeName = 'MyGeneratedTheme'; // 主题名称
const themeFileName = `${themeName}.json`;
const outputPath = path.resolve(__dirname, '../themes', themeFileName); // 输出路径

/**
 * 构建完整的VS Code主题定义对象。
 */
const themeDefinition = {
    $schema: 'vscode://schemas/color-theme', // 声明JSON Schema，提供智能提示
    name: themeName,
    type: 'dark', // 或 'light'，取决于你的主题是亮色还是暗色

    // VS Code UI 颜色定义
    colors: {
        // 编辑器核心颜色
        'editor.background': derivedColors['editor.background'],
        'editor.foreground': derivedColors['editor.foreground'],
        'editor.selectionBackground': derivedColors['editor.selectionBackground'],
        'editorLineNumber.foreground': derivedColors['editorLineNumber.foreground'],
        'editorCursor.foreground': baseColors['--color-text-primary'], // 光标颜色

        // UI 元素颜色
        'sideBar.background': baseColors['--color-background-primary'],
        'sideBar.foreground': baseColors['--color-text-primary'],
        'activityBar.background': '#2C2C2C',
        'statusBar.background': baseColors['--color-accent'],
        'statusBar.foreground': '#FFFFFF', // 状态栏前景通常是白色
        // ... 更多UI颜色，可参考VS Code主题API文档
    },

    // 语法高亮规则 (Token Colors)
    tokenColors: [
        {
            scope: ['comment'],
            settings: {
                foreground: baseColors['--syntax-comment'],
                fontStyle: 'italic', // 注释斜体
            },
        },
        {
            scope: ['keyword', 'storage.type', 'storage.modifier'],
            settings: {
                foreground: baseColors['--syntax-keyword'],
            },
        },
        {
            scope: ['string', 'punctuation.definition.string'],
            settings: {
                foreground: baseColors['--syntax-string'],
            },
        },
        {
            scope: ['constant.numeric'],
            settings: {
                foreground: baseColors['--syntax-number'],
            },
        },
        {
            scope: ['entity.name.function', 'support.function'],
            settings: {
                foreground: baseColors['--syntax-function'],
            },
        },
        {
            scope: ['variable', 'meta.definition.variable'],
            settings: {
                foreground: baseColors['--syntax-variable'],
            },
        },
        // ... 更多语法高亮规则，可参考VS Code内置主题或社区主题
    ],

    // 更多主题属性，如语义化Token颜色等
    // semanticHighlighting: true, // 启用语义化高亮
    // semanticTokenColors: { ... }
};

// 确保输出目录存在
fs.mkdirSync(path.dirname(outputPath), { recursive: true });

// 将主题定义对象转换为格式化的JSON字符串并写入文件
try {
    fs.writeFileSync(outputPath, JSON.stringify(themeDefinition, null, 2), 'utf-8');
    console.log(`成功生成主题文件: ${outputPath}`);
} catch (error) {
    console.error('生成主题文件时出错:', error);
}

{
    "name": "my-generated-theme-extension",
    "displayName": "My Generated Theme",
    "description": "A VS Code theme generated with TypeScript.",
    "version": "0.0.1",
    "publisher": "YourPublisherName",
    "engines": {
        "vscode": "^1.60.0"
    },
    "categories": [
        "Themes"
    ],
    "contributes": {
        "themes": [
            {
                "label": "My Generated Theme",
                "uiTheme": "vs-dark",
                "path": "./themes/MyGeneratedTheme.json"
            }
        ]
    },
    "scripts": {
        "build": "ts-node src/theme-generator.ts",
        "watch": "nodemon --watch src --ext ts --exec \"npm run build\"",
        "vscode:prepublish": "npm run build"
    },
    "devDependencies": {
        "@types/node": "^16.x",
        "typescript": "^4.3.5",
        "ts-node": "^10.0.0",
        "nodemon": "^2.0