Bootstrap VS Code 主题
内容提要
Bootstrap 发布了基于其 OKLCH 色板的 VS Code 主题，兼容 VS Code、Cursor 和 Shiki。主题源自 Pierre 主题，采用 Bootstrap 的 16 色、每色 13 变体的色板，并映射为语义角色。共四款：浅色、深色及各自的 Vibrant 变体，后者用 Display P3 增强饱和度，但暂不支持 VS Code。
延伸解读
主题的传承与改造
该主题并非从零开始，而是基于 Pierre 的 VS Code 主题进行分支，而 Pierre 主题又构建于 GitHub 的 VS Code 主题之上。Pierre 增加了更细粒度的语言标记支持和 Display P3 色彩支持。Bootstrap 团队在此基础上，将配色方案替换为自家基于 OKLCH 的调色板，从而在保留原有功能的同时，注入 Bootstrap 的品牌色彩体系。
OKLCH 调色板的优势
Bootstrap 的调色板在 OKLCH 色彩空间中构建，能提供感知均匀的明度、跨色相一致的彩度以及更好的对比度，有助于提升可访问性。调色板包含 16 种色相，每种色相有 13 个变体（从 025 到 975），通过 LAB 色彩混合创建以保持感知一致性。这些颜色被映射到语义角色，如背景、前景、边框、强调色、状态、语法高亮和 ANSI 终端颜色，供主题使用。
Vibrant 变体的色彩增强与限制
Vibrant 变体保留了源 OKLCH 颜色，并将其转换为 Display P3，同时增强饱和度（15-30%）和明度（5%），以进入 sRGB 无法达到的更广 P3 色域。然而，由于 VS Code 目前不支持十六进制或 RGB 以外的颜色格式，Vibrant 主题尚不能在 VS Code 中使用。但可以在 Shiki 项目或其他支持 Display P3 颜色的工具中使用。
安装与自定义方式
用户可以从 VS Code 市场安装主题，或克隆仓库并手动加载扩展。安装后，通过“代码 > 首选项 > 颜色主题”（⌘k ⌘t）选择主题。若要在个人配置中覆盖主题，可参考颜色主题文档中的指南。此外，文章还提供了贡献指南，包括克隆仓库、运行 npm install、按 F5 测试、编辑调色板或主题文件、运行构建和测试等步骤。
Q&A
Bootstrap VS Code 主题是什么？
Bootstrap 发布了基于其 OKLCH 色板的 VS Code 主题，兼容 VS Code、Cursor 和 Shiki。主题源自 Pierre 主题，采用 Bootstrap 的 16 色、每色 13 变体的色板，并映射为语义角色。
Bootstrap 的色板是如何构建的？
Bootstrap 的色板基于 OKLCH 色彩空间构建，提供感知均匀的亮度、跨色相一致的色度以及更好的对比度。包含 16 个色相（蓝、靛、紫、粉、红、橙、琥珀、黄、青柠、绿、蓝绿、青、棕、灰、白镴），每个色相有 13 个变体（从 025 到 975），通过 LAB 颜色混合创建以保持感知一致性。
Bootstrap VS Code 主题包含哪几款？
共四款：Bootstrap Light（浅色，使用十六进制颜色）、Bootstrap Dark（深色，使用十六进制颜色）、Bootstrap Light Vibrant（Display P3 色彩空间，增强饱和度）、Bootstrap Dark Vibrant（Display P3 色彩空间，增强饱和度）。
Vibrant 主题有什么特别之处？
Vibrant 变体保留源 OKLCH 颜色并转换为 Display P3，增强饱和度（15-30%）和亮度（5%），进入 sRGB 无法达到的更宽 P3 色域。但注意，Vibrant 主题目前无法在 VS Code 中使用，因为 VS Code 不支持十六进制或 RGB 以外的颜色格式；它们可用于 Shiki 项目或其他支持 Display P3 颜色的工具。
如何安装 Bootstrap VS Code 主题？
可以从 VS Code 市场安装，或克隆仓库并手动加载扩展。安装后，通过 Code > Preferences > Color Theme（⌘k ⌘t）选择主题。要覆盖个人配置中的主题，请遵循颜色主题文档中的指南。
如何为 Bootstrap VS Code 主题贡献代码？
克隆并打开仓库，运行 npm install，按 F5 打开加载扩展的新窗口，选择一个“Bootstrap…”主题进行测试，编辑 src/palette.ts 或 src/theme.ts，运行 npm run build（或 npm start 自动重建），运行 npm test 进行验证，然后提交 PR。反馈、问题和想法欢迎在 GitHub 上提出。
