扩展篇：从工程化到设计系统：构建深色/浅色双主题及多主题变体

your-theme/
├── src/
│   ├── core/
│   │   ├── colors-dark.yaml       # 深色主题变量
│   │   ├── colors-light.yaml       # 浅色主题变量
│   │   ├── colors-hc-black.yaml    # 高对比度深色主题
│   │   └── colors-hc-light.yaml    # 高对比度浅色主题（可选）
│   ├── languages/                  # 各语言规则（完全复用）
│   ├── workbench.yaml              # UI 颜色（引用变量）
│   └── semantic.yaml               # 语义规则（引用变量）
├── scripts/
│   └── build.js                    # 多主题构建脚本
└── themes/
    ├── your-theme-dark.json
    ├── your-theme-light.json
    ├── your-theme-hc-black.json
    └── your-theme-hc-light.json

# 深色主题
primary: "#3b82f6"
success: "#34d399"
warning: "#fbbf24"
error: "#f87171"
bg: "#0f172a"
text: "#e2e8f0"
# ... 其他变量

# 浅色主题（变量名与深色版完全一致，仅色值不同）
primary: "#0284c7"
success: "#059669"
warning: "#b45309"
error: "#b91c1c"
bg: "#f9fafb"
text: "#1e293b"
# ... 其他变量

# 推荐的命名方式
bgBase: "#0f172a" # 最底层背景
bgElevated: "#131c31" # 浮层背景
bgMuted: "#1e293b" # 次级背景
textPrimary: "#e2e8f0" # 主要文字
textMuted: "#94a3b8" # 辅助文字

const darkPrimary = chroma("#3b82f6");
const lightPrimary = darkPrimary.set("hsl.l", 0.48); // 将明度设为 48%

const darkPrimary = chroma("#3b82f6");
const lightPrimary = darkPrimary.set("hsl.l", 0.48).set("hsl.s", 0.7); // 明度降至48%，饱和度降至70%

const colorFiles = fs
  .readdirSync(coreDir)
  .filter((f) => f.startsWith("colors-") && f.endsWith(".yaml"));

colorFiles.forEach((file) => {
  const match = file.match(/^colors-(.+)\.yaml$/);
  if (!match) return;
  const themeType = match[1]; // 'dark', 'light', 'hc-black', 'hc-light' 等
  // ... 加载颜色变量并生成主题
});

const themeDisplayMap = {
  dark: { suffix: "Dark", uiTheme: "vs-dark" },
  light: { suffix: "Light", uiTheme: "vs" },
  "hc-black": { suffix: "High Contrast (Black)", uiTheme: "hc-black" },
  "hc-light": { suffix: "High Contrast (Light)", uiTheme: "hc-light" },
  // 可根据需要添加更多
};

// 在构建每个主题时：
const display = themeDisplayMap[themeType] || {
  suffix: themeType,
  uiTheme: "vs-dark",
};
const themeName = `${themeInfo.displayName} ${display.suffix}`;
const uiTheme = display.uiTheme;
// 注意：主题对象的 type 字段通常为 'dark' 或 'light'，可从 themeType 推断
const type = themeType.includes("light") ? "light" : "dark";

function replaceVariables(obj, colors) {
  if (typeof obj === "string") {
    return obj.replace(
      /\$\{([a-zA-Z0-9_-]+)\}([0-9a-fA-F]{2})?/g,
      (match, key, alpha) => {
        const value = colors[key];
        if (!value) {
          console.warn(`⚠️ 变量 ${key} 未定义`);
          return match;
        }
        // 智能处理透明度
        if (alpha && /^#[0-9a-fA-F]{6}$/.test(value)) {
          return value + alpha; // 6位色值 + 透明度后缀
        }
        if (alpha && /^#[0-9a-fA-F]{8}$/.test(value)) {
          console.warn(`⚠️ 变量 ${key} 已包含透明度，忽略后缀`);
          return value;
        }
        return value;
      },
    );
  }
  // ... 处理数组和对象
}

const pkg = require("../package.json");
const baseName = pkg.name.replace(/[^a-z0-9-]/gi, "-").toLowerCase();

"contributes": {
  "themes": [
    {
      "label": "Moongate Dark",
      "uiTheme": "vs-dark",
      "path": "./themes/moongate-dark.json"
    },
    {
      "label": "Moongate Light",
      "uiTheme": "vs",
      "path": "./themes/moongate-light.json"
    },
    {
      "label": "Moongate High Contrast (Black)",
      "uiTheme": "hc-black",
      "path": "./themes/moongate-hc-black.json"
    },
    {
      "label": "Moongate High Contrast (Light)",
      "uiTheme": "hc-light",
      "path": "./themes/moongate-hc-light.json"
    }
  ]
}

# colors-hc-black.yaml
primary: "#ffff00" # 亮黄
success: "#00ff00" # 亮绿
warning: "#ff8800"
error: "#ff0000"
bg: "#000000"
text: "#ffffff"
# ... 其他变量使用极高对比度色值

// scripts/build.js
// 完整脚本代码，包含上述所有增强功能

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

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

// ==================== 路径配置 ====================
const PATHS = {
  workbench: path.join(ROOT_DIR, "src", "workbench.yaml"),
  semantic: path.join(ROOT_DIR, "src", "semantic.yaml"),
  langDir: path.join(ROOT_DIR, "src", "languages"),
  specialDir: path.join(ROOT_DIR, "src", "special"),
  coreDir: path.join(ROOT_DIR, "src", "core"),
  outputDir: path.join(ROOT_DIR, "themes"),
};

// ==================== 辅助函数 ====================

function ensureFileExists(filePath, description) {
  if (!fs.existsSync(filePath)) {
    throw new Error(`❌ 未找到 ${description} 文件: ${filePath}`);
  }
}

function safeLoadYaml(filePath, description) {
  try {
    return yaml.load(fs.readFileSync(filePath, "utf8"));
  } catch (err) {
    console.error(`❌ 解析 ${description} 失败 (${filePath}):`, err.message);
    return null;
  }
}

function replaceVariables(obj, colors) {
  if (typeof obj === "string") {
    return obj.replace(
      /\$\{([a-zA-Z0-9_-]+)\}([0-9a-fA-F]{2})?/g,
      (match, key, alpha) => {
        const value = colors[key];
        if (value === undefined) {
          console.warn(`⚠️ 警告: 变量 "${key}" 未定义，保留原样`);
          return match;
        }

        if (alpha) {
          if (/^#[0-9a-fA-F]{8}$/.test(value)) {
            console.warn(
              `⚠️ 警告: 变量 "${key}" 值 ${value} 已包含透明度，忽略后缀 "${alpha}"`,
            );
            return value;
          }
          if (/^#[0-9a-fA-F]{6}$/.test(value)) {
            return value + alpha;
          }
          console.warn(
            `⚠️ 警告: 变量 "${key}" 值 ${value} 格式异常，无法处理透明度`,
          );
          return value;
        }
        return value;
      },
    );
  }
  if (Array.isArray(obj)) {
    return obj.map((item) => replaceVariables(item, colors));
  }
  if (obj && typeof obj === "object") {
    const result = {};
    for (const [k, v] of Object.entries(obj)) {
      result[k] = replaceVariables(v, colors);
    }
    return result;
  }
  return obj;
}

function getThemeInfo() {
  const pkgPath = path.join(ROOT_DIR, "package.json");
  if (!fs.existsSync(pkgPath)) {
    return { name: "your-theme", displayName: "Your Theme" };
  }
  try {
    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
    let displayName = pkg.displayName || pkg.name || "Your Theme";
    if (displayName.startsWith("@") && displayName.includes("/")) {
      displayName = displayName.split("/")[1];
    }
    return {
      name: pkg.name || "your-theme",
      displayName,
    };
  } catch {
    return { name: "your-theme", displayName: "Your Theme" };
  }
}

// 主题显示名称和 uiTheme 映射
const themeDisplayMap = {
  dark: { suffix: "Dark", uiTheme: "vs-dark" },
  light: { suffix: "Light", uiTheme: "vs" },
  "hc-black": { suffix: "High Contrast (Black)", uiTheme: "hc-black" },
  "hc-light": { suffix: "High Contrast (Light)", uiTheme: "hc-light" },
  // 可根据需要扩展
};

// ==================== 主流程 ====================
function main() {
  console.log("🚀 开始构建主题...\n");

  // 1. 检查必需文件
  try {
    ensureFileExists(PATHS.workbench, "workbench");
    ensureFileExists(PATHS.semantic, "semantic");
    ensureFileExists(PATHS.coreDir, "core 目录");
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }

  // 2. 加载公共规则
  console.log("📦 加载公共规则...");
  const workbenchRaw = safeLoadYaml(PATHS.workbench, "workbench.yaml");
  const semanticRaw = safeLoadYaml(PATHS.semantic, "semantic.yaml");
  if (!workbenchRaw || !semanticRaw) {
    process.exit(1);
  }

  // 3. 收集语言规则
  console.log("📚 加载语言规则...");
  let tokenColorsRaw = [];
  if (fs.existsSync(PATHS.langDir)) {
    const langFiles = fs
      .readdirSync(PATHS.langDir)
      .filter((f) => f.endsWith(".yaml"))
      .sort();
    langFiles.forEach((file) => {
      const filePath = path.join(PATHS.langDir, file);
      const langRules = safeLoadYaml(filePath, `语言规则 ${file}`);
      if (langRules?.tokenColors) {
        tokenColorsRaw = tokenColorsRaw.concat(langRules.tokenColors);
        console.log(`   ✅ 已加载: ${file}`);
      }
    });
  } else {
    console.warn("⚠️ languages 目录不存在，跳过语言规则加载");
  }

  // 4. 加载特殊规则
  console.log("✨ 加载特殊规则...");
  if (fs.existsSync(PATHS.specialDir)) {
    const specialFiles = fs
      .readdirSync(PATHS.specialDir)
      .filter((f) => f.endsWith(".yaml"));
    specialFiles.forEach((file) => {
      const filePath = path.join(PATHS.specialDir, file);
      const specialRules = safeLoadYaml(filePath, `特殊规则 ${file}`);
      if (specialRules?.tokenColors) {
        tokenColorsRaw = tokenColorsRaw.concat(specialRules.tokenColors);
        console.log(`   ✅ 已加载: ${file}`);
      }
    });
  } else {
    console.log("ℹ️ special 目录不存在，跳过特殊规则");
  }

  // 5. 获取颜色变量文件
  console.log("\n🎨 扫描颜色变量文件...");
  const colorFiles = fs
    .readdirSync(PATHS.coreDir)
    .filter((f) => f.startsWith("colors-") && f.endsWith(".yaml"));

  if (colorFiles.length === 0) {
    console.error("❌ core 目录下没有找到 colors-*.yaml 文件");
    process.exit(1);
  }

  // 6. 读取主题信息
  const themeInfo = getThemeInfo();
  let baseName = themeInfo.name.replace(/[^a-z0-9-]/gi, "-").toLowerCase();

  // 7. 为每个颜色文件构建主题
  console.log(`\n🔨 开始构建主题 (基础名称: ${baseName})...\n`);
  colorFiles.forEach((colorFile) => {
    const match = colorFile.match(/^colors-(.+)\.yaml$/);
    if (!match) return;
    const themeType = match[1]; // 如 'dark', 'light', 'hc-black'
    const outputFile = path.join(
      PATHS.outputDir,
      `${baseName}-${themeType}.json`,
    );

    // 加载颜色变量
    const colorsPath = path.join(PATHS.coreDir, colorFile);
    const colors = safeLoadYaml(colorsPath, `颜色变量 ${colorFile}`);
    if (!colors) {
      console.error(`   ❌ 跳过 ${colorFile}`);
      return;
    }

    // 替换变量
    const uiColors = replaceVariables(workbenchRaw, colors);
    const semanticColors = replaceVariables(semanticRaw, colors);
    const tokenColors = replaceVariables(tokenColorsRaw, colors);

    // 确定显示名称和 uiTheme
    const display = themeDisplayMap[themeType] || {
      suffix: themeType,
      uiTheme: "vs-dark",
    };
    const themeName = `${themeInfo.displayName} ${display.suffix}`;

    // 主题类型映射表（用于 theme.type 字段）
    const themeTypeMap = {
      dark: "dark",
      light: "light",
      "hc-black": "dark",
      "hc-light": "light",
      // 可根据需要扩展，例如 'sepia' 可映射为 'light'
    };
    const type = themeTypeMap[themeType] || "dark"; // 默认深色

    const theme = {
      name: themeName,
      type: type,
      colors: uiColors,
      tokenColors: tokenColors,
      semanticTokenColors: semanticColors,
    };

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

    fs.writeFileSync(outputFile, JSON.stringify(theme, null, 2));
    console.log(`   ✅ 构建完成: ${outputFile}`);
  });

  console.log("\n🎉 所有主题构建完毕！");
}

main();