优化VS Code主题开发：摆脱巨型JSON，拥抱脚本化生成

// src/themeConfig.ts

interface ColorPalette {
    primary: string;
    secondary: string;
    background: string;
    foreground: string;
    accent: string;
    error: string;
    warning: string;
    info: string;
    success: string;
}

interface TokenColor {
    scope: string | string[];
    settings: {
        foreground?: string;
        fontStyle?: string; // e.g., 'italic', 'bold', 'underline'
    };
}

interface ThemeDefinition {
    colors: { [key: string]: string };
    tokenColors: TokenColor[];
    // ... 其他 VS Code 主题属性
}

// 定义颜色调色板
const colors: ColorPalette = {
    primary: '#61AFEF', // 蓝色
    secondary: '#C678DD', // 紫色
    background: '#282C34', // 深灰
    foreground: '#ABB2BF', // 浅灰
    accent: '#98C379', // 绿色
    error: '#E06C75', // 红色
    warning: '#E5C07B', // 黄色
    info: '#56B6C2', // 青色
    success: '#61AFEF', // 蓝色
};

// 根据基色生成派生色（示例）
function darken(color: string, percentage: number): string {
    // 简单的颜色变暗逻辑，实际可能需要更复杂的库
    // 这是一个简化示例，实际应使用颜色处理库如 'color'
    return color; // 占位符
}

// 定义 UI 元素颜色
const uiColors = {
    'editor.background': colors.background,
    'editor.foreground': colors.foreground,
    'sideBar.background': darken(colors.background, 0.1),
    'statusBar.background': darken(colors.background, 0.05),
    'activityBar.background': darken(colors.background, 0.15),
    'selection.background': `${colors.primary}40`, // 添加透明度
    'editorCursor.foreground': colors.primary,
    // ... 更多 UI 颜色
};

// 定义 token 颜色和样式
const tokenColors: TokenColor[] = [
    {
        scope: ['comment', 'punctuation.definition.comment'],
        settings: {
            foreground: '#5C6370', // 灰色注释
            fontStyle: 'italic',
        },
    },
    {
        scope: ['keyword', 'storage.type', 'storage.modifier'],
        settings: {
            foreground: colors.secondary, // 紫色关键字
        },
    },
    {
        scope: ['string', 'punctuation.definition.string'],
        settings: {
            foreground: colors.accent, // 绿色字符串
        },
    },
    {
        scope: ['variable', 'parameter'],
        settings: {
            foreground: colors.foreground,
        },
    },
    {
        scope: ['function', 'entity.name.function'],
        settings: {
            foreground: colors.primary, // 蓝色函数名
        },
    },
    {
        scope: ['entity.name.type', 'support.class', 'support.type'],
        settings: {
            foreground: colors.info, // 青色类型
        },
    },
    // ... 更多 token 规则
];

// 导出完整的 ThemeData 对象
export const themeData: ThemeDefinition = {
    $schema: 'vscode://schemas/color-theme', // 声明主题 JSON 模式
    name: 'MyCustomTheme',
    type: 'dark', // 'light' or 'dark'
    colors: {
        ...uiColors,
        // 可以根据需要添加更多颜色
    },
    tokenColors: tokenColors,
    // ... 其他可选属性，如 semanticHighlighting
};

// scripts/generateTheme.ts
import * as fs from 'fs';
import * as path from 'path';
import { themeData } from '../src/themeConfig'; // 导入主题配置

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

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

try {
    const themeJsonString = JSON.stringify(themeData, null, 4); // 格式化输出
    fs.writeFileSync(outputPath, themeJsonString, 'utf-8');
    console.log(`Successfully generated theme file: ${outputPath}`);
} catch (error) {
    console.error(`Error generating theme file: ${error}`);
    process.exit(1);
}

// package.json
{
  "name": "my-custom-theme-extension",
  "displayName": "My Custom Theme",
  "description": "A custom theme for VS Code.",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.75.0"
  },
  "categories": [
    "Themes"
  ],
  "contributes": {
    "themes": [
      {
        "label": "My Custom Theme",
        "uiTheme": "vs-dark",
        "path": "./themes/my-custom-theme.json"
      }
    ]
  },
  "scripts": {
    "build:theme": "ts-node scripts/generateTheme.ts",
    "watch:theme": "nodemon --watch src/**/*.ts --exec \"npm run build:theme\""
  },
  "devDependencies": {
    "@types/node": "^20.x",
    "ts-node": "^10.x",
    "typescript": "^5.x",
    "nodemon": "^3.x" // 用于开发时自动重新生成
  }
}