DSH-High-Contrast-Theme
本主题插件目前处于早期开发阶段，存在大量未完善之处，不可用于生产环境。
作者本人仍在学习无障碍（a11y）知识，因此代码可能包含许多设计缺陷和兼容性问题。
如果您在使用过程中发现任何问题，或是能提供无障碍改进建议，非常欢迎您提交 Issue —— 您的反馈将直接帮助项目的成长。
在进入稳定版之前，请勿依赖本插件进行实际工作。
DeepSeek Harness (DSH) 的 WCAG 合规高对比度主题插件：纯黑表面、终端风格语法色板、始终可见的焦点指示。所有功能均通过标准插件 API 实现——绝不修改 Harness 源码或全局样式表。
![对比度概览：黑色表面、白色文字、黄/青/绿/橙/品红语法色、白色 1px 边框、黄色焦点环]
色板（相对 #000000 的对比度，WCAG 相对亮度公式）
| 角色 | 色值 | 对比度 | WCAG 4.5:1 |
|---|---|---|---|
| 背景 / 表面 | #000000 |
— | — |
| 主文本 / 图标 | #FFFFFF |
21.00:1 | ✅ |
| 次要文本 | #C0C0C0 |
11.54:1 | ✅ |
| 关键词 / 标签 / 选中 | #FFFF00 |
19.56:1 | ✅ |
| 字符串 / 变量值 | #00FF00 |
15.30:1 | ✅ |
| 数字 / 常量 | #FFA500 |
10.63:1 | ✅ |
| 函数 / 链接 | #00FFFF |
16.75:1 | ✅ |
| 注释 / 提示 | #808080 |
5.32:1 | ✅ |
| 括号 / 运算符 / 分隔符 | #FF00FF |
6.70:1 | ✅ |
| 边框 / 分割线 | #FFFFFF 1px |
21:1 | ✅ |
| 错误 / 成功 / 警告 | #FF4444 / #00FF00 / #FFA500 |
≥6.16:1 | ✅ |
焦点：:focus-visible 显示 3px #FFFF00 外框 + 2px 偏移（WCAG 2.4.7 可见焦点、2.4.11 焦点外观：≥2px 且与背景对比 ≥3:1）。文本选区使用同款黄色。
工作原理
全部通过三个官方 DSH 插件 API 实现——不碰 Harness 源码、不写全局 CSS、不操作 document.body：
theme.overrideTokens(source, { light, dark })—— 将约 70 个 alias/specific token（tokens.ts）叠加到当前主题之上：产品暴露的全部表面、文本层级、边框、交互状态、markdown/代码区域、菜单、提示气泡、滚动条与状态色。每项在明/暗两种配色方案中都提供同一套终端色板，因此无论系统偏好如何，界面始终为纯黑。disposer 在插件停止/更新时恢复基础主题。styles.insert(css)—— 包自有样式表，用于 token 层无法触及的部分：--shiki-*语法变量（代码块使用的 shiki css-variables 主题——:root亮色 /body[data-ds-dark-theme]暗色，与主题样式表选择器一致，后注入者在同特异性下胜出）；- 按钮、文本选区与焦点环。
slots.inject('settings.general.item')—— 设置 → General 中的"高对比度主题 (WCAG)"开关行。
生命周期：token 层与样式表由各自 disposer 拆除，设置行随插件 fiber 释放——停止或更新插件后零残留。不使用定时器或事件监听器。
覆盖如何到达页面：基础 token 样式表（design-platform.css）把所有 alias/specific 变量声明在 body 上，因此 :root 样式表无法胜过它。主题 presenter（dsh-client-ui-layout）改为把合成快照中的每个覆盖 token 写为 <body> 上的内联自定义属性（body.style.setProperty），内联样式压过重绑定——这就是为什么全部表面集（代码块、内联代码、输入框、菜单、提示气泡、滚动条）都必须列在 tokens.ts 中。只有 --shiki-* 变量不在 presenter 的写入集内，由注入的样式表（后注入、同选择器）确定性地接管。
安装与构建
npm install
npm run build # tsc → lib/client/index.js
在 Harness 中加载
作为动态插件（快速验证）： 把 src/client 的 Client 代码（或会话中的 plain-JS 转录）放入 cordis_define / cordis_run 流程。Client 包首次运行需要一次性授权。
作为组合行（位于 agent preset 的 agent.cordis.yml 中，先 npm pack 或使用 file: 依赖）：
- id: ui-high-contrast-theme
name: 'dsh-high-contrast-theme'
config:
styleButtons: true
从内置 standard preset 复制出本地 preset，添加该行并做挂载校验：
agentPresets.copy('standard', 'high-contrast')
# 编辑 <user-root>/.agent-presets/high-contrast/agent.cordis.yml
# 编写 preset.yml：name + description
agentPresets.standingKeyFor('high-contrast')
配置
| 选项 | 类型 | 默认值 | 含义 |
|---|---|---|---|
styleButtons |
boolean |
true |
按钮透明底 + 1px 白色边框；悬停反色为白底黑字。这是影响所有按钮的元素级规则——若宽泛处理与产品控件冲突，可关闭。 |
验证
- 加载插件后，页面立即变为纯黑底白字。
- 设置 → General → 开关"高对比度主题 (WCAG)"。
- 按
Tab—— 每个可聚焦元素显示黄色 3px 焦点环。 - 在对话中让模型输出代码 —— 代码块显示终端色板。
- 停止插件 —— 基础主题完全还原，零残留。
License
MIT — 见 LICENSE。
No comments yet. Be the first to write one.