What problem does it solve? VS Code extension and workbench contributors often hardcode colors, shadows, and borders that break in dark, light, or high-contrast themes and get flagged in code review. This Skill provides the exact patterns for registering theme-aware colors, styling widgets, and meeting focus and high-contrast requirements. ## Core Features & Use Cases - Color Registration: Register colors with defaults for all four theme types (light, dark, hcDark, hcLight) using registerColor in colorUtils.ts, with transforms like transparent(), darken(), and lighten(). - Widget Style Patterns: Apply default widget style objects (defaultButtonStyles, defaultInputBoxStyles, etc.) and override specific colors via factory functions in defaultStyles.ts. - Focus & High-Contrast Compliance: Implement focus indicators with var(--vscode-focusBorder), trap focus in modal dialogs, and replace box shadows with contrastBorder in HC themes. - Use Case: When adding a new custom widget to the workbench, use this Skill to register its colors, wire CSS variables, and pass HC/focus review without hardcoded values. ## Quick Start Ask the assistant to register a new theme color for a custom widget and style it following VS Code theming and high-contrast rules.
