【免费下载链接】pierrepierre’s open source code项目地址https://gitcode.com/gh_mirrors/pi/pierre点击查看免费下载Pierre 主题包pierre/theme为 Shiki、VS Code、Cursor 与 Zed 提供了十个不可变的主题对象它们按“五种处理方式treatment× 明暗双色light/dark”组织成五对变体。本文以 skills/theme/references/variants.md 为核心骨架深入讲解每一种变体的适用场景、底层实现原理色板、角色映射、Display-P3 与 CVD 模拟并给出在 Shiki 与编辑器中落地使用的完整方法帮助你为自己的产品选出正确且成对使用的 Pierre 主题。一、变体总览五种处理方式与十款主题Pierre 主题包一共交付10 个主题对象它们并非十个彼此独立的设计而是5 种“处理方式”treatment各自成对处理方式Treatment浅色条目Light深色条目Dark适用场景Standard标准pierre-lightpierre-darkPierre 默认外观Soft柔和pierre-light-softpierre-dark-soft低对比度外观Vibrant鲜艳pierre-light-vibrantpierre-dark-vibrant在 Shiki 或网页中输出 Display-P3 色彩Protanopia and deuteranopia红绿色盲pierre-light-protanopia-deuteranopiapierre-dark-protanopia-deuteranopia红-绿色觉障碍支持Tritanopia蓝黄色盲pierre-light-tritanopiapierre-dark-tritanopia蓝-黄色觉障碍支持选择与配对的核心规则选择一个处理方式并将其浅色与深色条目作为一对使用——不要混搭例如不要同时使用pierre-light与pierre-dark-soft。除非产品明确指定其他处理方式否则使用标准Standard对。明暗两套配色必须使用同一种处理方式以保证界面在切换深浅色时风格一致。包内所有主题的完整清单、默认导出与字段结构见 skills/theme/references/api.md主题对象可通过themeNames主入口导出按包内顺序列出全部 10 个名称。二、Standard 与 Soft默认外观与低对比度外观2.1 Standard标准pierre-light/pierre-dark是 Pierre 的默认外观也是主题包内绝大多数角色映射的“基准设计”。从源码结构看两套标准主题分别由 src/roles/light.ts 与 src/roles/dark.ts 中定义的Roles对象驱动并通过统一的 src/createTheme.ts 组装为完整 VS Code 主题对象。Roles类型见 src/roles/Roles.ts把一套主题拆解为六类角色bg编辑器背景editor、窗口背景window、内嵌控件背景inset、浮层背景elevatedfg基础前景与fg1–fg4五级前景灰度border窗口、编辑器、缩进引导线、内嵌控件、浮层的边框accent强调色primary、链接色link、弱化强调subtle、强调色上的对比前景contrastOnAccentstates合并、成功、危险、警告、信息五种状态色syntax注释、字符串、数字、关键字、正则、函数、类型、变量等 18 类语法 token 色ansi终端 16 色8 标准色 8 亮色。2.2 Soft柔和 / 低对比度pierre-light-soft/pierre-dark-soft在同一套色板体系内降低整体对比度适合希望减弱视觉冲击、长时间阅读的场景。以 src/roles/lightSoft.ts 为例Soft 浅色版的关键特征是背景全部落在中性色neutral刻度的高亮端编辑器纯白#ffffff窗口neutral[040]内嵌neutral[060]浮层neutral[020]前景与边框整体下移一档基础前景为neutral[800]边框为neutral[080]–neutral[200]从而比 Standard 更柔和语义色与语法色仍复用同一套 21 色色板见下文保证“家族一致性”。Standard 与 Soft 共用neutral中性刻度src/palettes.ts 中保留了一份gray刻度仅作为参考色板源码注释明确说明它不用于任何内置角色四个变体Standard、Soft 及两个 CVD 变体全部使用neutral。三、Vibrant面向 Shiki 与网页的 Display-P3 输出pierre-light-vibrant/pierre-dark-vibrant是专为Shiki 语法高亮或网页输出设计的变体其颜色使用 CSScolor(display-p3 r g b)语法书写以充分利用 Display-P3 广色域。编辑器扩展中不包含这两款——src/color/p3.ts 的注释明确说明VS Code 仅支持 hex/RGB 颜色格式因此 Vibrant 主题在 VS Code 中无法使用详见 DISPLAY-P3.md。3.1 色域转换与增强算法从源码看srgbHexToP3Color()src/color/p3.ts的转换流程为解析 sRGB hex → RGB0–1 范围通过srgbToLinear线性化去 gamma用线性 sRGB → 线性 P3 矩阵变换Display-P3 与 sRGB 使用相同的传输函数R_p3 0.82246197 * R_srgb 0.17753803 * G_srgb G_p3 0.03319420 * R_srgb 0.96680580 * G_srgb B_p3 0.01708263 * R_srgb 0.07239744 * G_srgb 0.91051993 * B_srgb施加 P3 gamma 后再执行色域增强enhanceForP3Gamut饱和度提升15%–30%0.15 s * 0.15随原始饱和度变化对高饱和中调颜色s 0.5且l 0.7亮度再提升约5%灰色与接近黑/白的颜色s 0.1或l 0.1或l 0.9保持不动。这种“先转换、再有选择地增强”的做法与单纯的数学空间变换不同它把颜色真正推入 sRGB 无法表达的 P3 区域同时保证灰阶、黑、白保持准确在非 P3 浏览器上也能优雅降级。3.2 在 Shiki 中使用 Vibrant在网页项目中使用 Vibrant 变体的完整方式见 skills/theme/references/recipe-shiki.mdpnpm add pierre/theme shikiimport pierreDarkVibrant from pierre/theme/pierre-dark-vibrant; import { codeToHtml } from shiki; const html await codeToHtml(source, { lang: typescript, theme: pierreDarkVibrant, });若应用同时支持明暗两种配色应同时导入匹配的明暗一对若允许用户在运行时切换主题则应使用themingskill 的运行时主题方案。四、CVD 变体为色觉障碍人群工程化设计的主题四种 CVD 主题红绿色觉障碍 × 明暗、蓝黄色觉障碍 × 明暗是 Pierre 主题包中最有技术含量的一组。它们并非简单的“换色”而是基于色觉缺陷生理模型重新映射了全部语义与语法颜色详见 ACCESSIBILITY.md。4.1 背景三种二色性色觉缺陷视网膜通过 L长波/红、M中波/绿、S短波/蓝三种视锥感知颜色。当某一种视锥缺失或偏移时主要沿该视锥轴区分的颜色会坍缩为同一种感知色类型缺失视锥混淆保留可区分的轴ProtanopiaL红红 ↔ 绿蓝 ↔ 橙/黄 亮度DeuteranopiaM绿红 ↔ 绿蓝 ↔ 橙/黄 亮度TritanopiaS蓝蓝 ↔ 绿及黄 ↔ 紫红 ↔ 青/teal 亮度注意Tritanopia 常被粗略称为“蓝黄色盲”但蓝与黄在亮度上差异很大亮度通道是保留的真正坍缩的配对是蓝 ↔ 绿。对代码编辑器而言最致命的是普通主题把最重要的信号——新增 vs 删除、通过 vs 失败、错误 vs 警告——编码为红 vs 绿而红绿色盲最常见的 CVD看红绿几乎相同。4.2 工程化设计的四条原则相同的“壳”家族一致性每个 CVD 主题原样复用基础light/dark的bg、fg、border角色窗口、文本与边框与 Pierre Light/Dark 逐像素一致只改accent、states、syntax、ansi等彩色角色。信号搭载在保留的轴上Protan/Deutan正向/新增 →蓝负向/删除 →橙Tritan正向/新增 →teal/青负向/删除 →红/朱红vermillion。亮度作为备份通道二色性色觉下只有约 2 个可用色相极 亮度却有约 20 个彩色角色当两个角色必须共用同一色相极时如多个“冷色”语法 token用**不同色板刻度亮度**分离。复用既有色板所有颜色都来自 src/palettes.ts 中已有的刻度blue、orange、teal、vermillion、magenta等不发明偏离品牌的新色相。4.3 角色映射示例源码可验证以 src/roles/protanDeutanLight.ts 与 src/roles/tritanopiaLight.ts 为代表的角色映射ACCESSIBILITY.md 中的表格Protan/Deutan —— 轴蓝 ↔ 橙角色浅色深色理由accent.primary/linkblue 500blue 500保留 Pierre 品牌蓝success新增blue 700blue 300正向 → 蓝与强调色按亮度拆分danger删除/错误orange 700orange 400负向 → 橙warnyellow 500yellow 300与 danger 有足够亮度差infocyan 700cyan 400冷色侧syntax.string新增blue 800blue 300“新增”极syntax.tag删除orange 700orange 400“删除”极Tritanopia —— 轴红 ↔ 青/teal角色浅色深色理由success新增teal 700teal 300正向 → teal/青danger删除/错误vermillion 600vermillion 400负向 → 红保留warnamber 600amber 400与 danger 有 ΔE 分离mergemagenta 700magenta 400红紫——tritan 安全远离蓝也远离红ansi.red/ansi.greenvermillion / tealvermillion / teal终端通过/失败可区分4.4 客观测试门禁不靠猜靠模拟CVD 主题的可靠性由模拟 量化指标保证而非主观判断src/color/cvd.ts 实现了 Machado, Oliveira Fernandes (2009) 的生理学模拟模型对 protan/deutan/tritan 三种二色性分别嵌入 11 个严重度0.0 正常视觉 → 1.0 完全二色性的 3×3 矩阵主题在严重度 1.0最坏情况下被门禁校验因此对较轻的异常三色视也兼容。模拟在线性 RGB中执行同时test/cvd.test.ts额外用 culori 的 gamma-sRGB 约定交叉核对 Tier-1/Tier-2 的可区分性。模型自带自检cvdSelfChecksseverity-0 恒等、中性灰轴保持每行矩阵行和 ≈ 1、以及“被混淆的轴确实坍缩”protan/deutan 下红绿 ΔE 至少减半tritan 下蓝绿 ΔE 至少减半。packages/theme/test/cvd.test.ts 是客观门禁对每种缺陷分别在线性 RGB 与 gamma-sRGB 两种约定下模拟每个彩色角色若任何“必须可区分”的配对不再可区分CIEDE2000 ΔE或不可读WCAG 对比度构建即失败。门禁分为三个层级Tier-1ΔE ≥ 11颜色是唯一线索的 diff 增删背景/文本、合并冲突背景、终端红绿、Tier-2ΔE ≥ 8诊断信息与核心语法有色觉之外的非颜色线索、Tier-3仅报告不阻断git 树与扩展语法有字母徽章与粗斜体兜底。对比度方面正文文本要求4.5:1语法 token 与语义信号色要求3:1模拟前后均检查品牌蓝、警告黄等固有高亮度颜色仅报告其可区分性而不要求原始对比度。五、编辑器扩展包含哪些变体编辑器扩展VS Code / Cursor / Zed包含 8 个 sRGB 主题标准、柔和Soft、protanopiadeuteranopia、tritanopia 四种处理方式 × 明暗。Vibrant 不在其中——从 packages/theme/package.json 的contributes.themes可以看到VS Code 扩展声明了 8 个主题条目如Pierre Light、Pierre Light Soft、Pierre Dark Protanopia Deuteranopia等全部指向themes/*.json文件。安装方式见 skills/theme/references/recipe-editor.mdVS Code / Cursor从扩展市场安装Pierre Theme扩展 → 打开颜色主题选择器 → 选择Pierre主题Zed从 Zed 扩展注册表安装Pierre扩展 → 打开主题选择器 → 选择Pierre主题。六、源码产物JSON 主题文件与不可变主题对象原始 JSONpierre/theme/themes/*暴露每个生成的 JSON 文件含.json后缀仓库中对应 packages/theme/themes/ 下的 10 个文件如pierre-dark.json、pierre-dark-soft.json、pierre-dark-vibrant.json等。不可变对象每个具名入口如pierre/theme/pierre-dark默认导出一个不可变主题对象字段为name稳定标识、displayName主题选择器标签、typelight/dark、colorsVS Code 工作台颜色键映射、tokenColorsTextMate token 样式、semanticTokenColors语义 token 样式——这些字段正是 src/createTheme.ts 中VSCodeTheme类型定义的形状。包元数据pierre/theme声明sideEffects: false适合摇树优化其exports为每个主题提供独立的子路径入口./pierre-light、./pierre-dark-vibrant等便于按需导入单一主题。七、实战选型建议综合 variants.md 的规则与源码实现给出如下选型决策路径默认选择除非产品有明确要求一律使用 Standard 对pierre-lightpierre-dark。界面偏柔和使用 Soft 对二者共用neutral刻度与 Standard 保持同一家族风格。Web/Shiki 且追求广色域表现使用 Vibrant 对注意它只在支持 CSS Display-P3 的浏览器/显示器上发挥优势且不能用于编辑器扩展。无障碍需求若产品面向色觉障碍用户或需要满足无障碍合规按目标人群选择 CVD 变体——红绿色觉障碍用 protanopia-deuteranopia 对蓝黄色觉障碍用 tritanopia 对这些变体的“壳”与 Standard 逐像素一致切换成本最低。无论选哪一种明暗两套始终成对使用同一种处理方式避免深浅色切换时风格漂移。若应用需要在运行时跟随系统色模式切换主题或在运行时动态切换主题请进一步参考themingskill 的运行时主题方案见 skills/theme/SKILL.md。赞分享【免费下载链接】pierrepierre’s open source code项目地址https://gitcode.com/gh_mirrors/pi/pierre点击查看免费下载相关推荐Pierre 主题 CVD 无障碍设计指南色觉缺陷主题的工程原理、角色映射与客观验证Pierre 主题 CVD 无障碍设计指南色觉缺陷主题的工程原理、角色映射与客观验证 导读 Pierre 主题为色觉缺陷CVD俗称色盲用户内置了四款Pierre 主题体系全指南使用 pierre/theme 为 Shiki、VS Code、Cursor 与 Zed 接入 Pierre 语法与编辑器主题Pierre 主题体系全指南使用 pierre/theme 为 Shiki、VS Code、Cursor 与 Zed 接入 Pierre 语法与编辑器主题Pierre 主题 Zed 扩展使用指南安装、变体与主题文件结构解析Pierre 主题 Zed 扩展使用指南安装、变体与主题文件结构解析 本篇技术指南围绕开源仓库 pierre 中 Pierre Theme for Zed h上一篇医疗影像系统jsDelivr加速医学图像查看器资源下一篇Amazon Bedrock Agentcore 无服务器架构Lambda函数集成AI代理完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考