SuperAPI AI 工具集

ux-theming

设计与创作

查看项目

更新于 10-16 00:32

技能介绍

用途:为 VS Code 相关界面开发提供主题与配色规范,覆盖颜色注册、CSS 变量使用、控件样式模式、焦点指示器与高对比度主题要求。

主要能力:

  1. 颜色注册。在 src/vs/platform/theme/common/colorUtils.ts 中用 registerColor 注册颜色,需为 light、dark、hcDark、hcLight 四种主题提供默认值;高对比度主题须用实色(避免透明)并通过 contrastBorder 显式设置边框;派生颜色可用 transparent()、darken()、lighten()、oneOf() 等颜色变换;尽量引用已有颜色而非硬编码十六进制值。
  2. 颜色分类。基础色在 colors/baseColors.ts(foreground、focusBorder、contrastBorder、文本链接);编辑器色在 colors/editorColors.ts;输入类在 colors/inputColors.ts;列表/树在 colors/listColors.ts;杂项在 colors/miscColors.ts;工作台色在 workbench/common/theme.ts。
  3. 在 CSS 中使用颜色。颜色会作为 CSS 自定义属性注入到 .monaco-workbench,例如 editor.background 对应 --vscode-editor-background,用 var(--vscode-editor-background) 引用;colorUtils.ts 提供 asCssVariable(colorId) 与 asCssVariableName(colorId) 转换函数。
  4. 控件样式模式。src/vs/platform/theme/browser/defaultStyles.ts 为每种控件提供默认样式对象和覆盖工厂,如 defaultButtonStyles、defaultInputBoxStyles 等,也可用 getButtonStyles({ buttonBackground: ... }) 覆盖特定颜色。
  5. 焦点指示器。定义在 src/vs/workbench/browser/media/style.css,须使用 var(--vscode-focusBorder),默认 outline-offset: -1px(复选框例外为 2px);激活元素用 .my-widget:active { outline: 0 !important; } 抑制焦点环;程序化焦点用 .synthetic-focus;切换按钮用 border: 1px dashed var(--vscode-focusBorder)。模态对话框须用 dom.trackFocus() 并处理 Tab/Shift+Tab 进行焦点捕获。
  6. 高对比度规则。注册颜色时须提供 hcDark 与 hcLight 默认值;HC 背景用 Color.black/Color.white;HC 边框引用 contrastBorder(普通主题为 null,HC 中可见);HC 焦点用 activeContrastBorder;CSS 中用 .hc-black/.hc-light 选择器覆盖;TypeScript 中用 isHighContrast(theme.type) 判断;HC 模式下须移除或替换 box-shadow。
  7. 禁止硬编码视觉值。颜色、阴影、边框相关值必须来自 CSS 变量或注册的颜色令牌,唯一例外是 0 和 100% 等纯结构性测量。尺寸、间距、圆角、字体与描边有独立设计系统令牌,参见 ux-css-layout 技能与自动注入的 .github/instructions/design-tokens.instructions.md。

关键文件:colorUtils.ts(颜色注册)、colorRegistry.ts(颜色注册表)、baseColors.ts、workbench/common/theme.ts(工作台颜色)、defaultStyles.ts(控件默认样式)、workbench/browser/media/style.css(全局工作台样式)。

限制:资料未提供安装命令、平台或收费信息。