Agent skill · design visual · microsoft
ux-theming
VS Code theming, color tokens, widget styles, focus indicators, and high-contrast theme support. Use when registering colors, styling widgets with theme tokens, or ensuring HC/focus compliance.
Why this skill is useful
Provides specific patterns and rules for theming in VS Code that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 188,455 stars on the source repository.
What this skill does
This skill covers color registration, CSS variable usage, widget style patterns, focus indicators, and high-contrast theme requirements. --- 1. Registering Colors File: src/vs/platform/theme/common/colorUtils.ts Rules: Provide defaults for all four theme types: light, dark, hcDark, hcLight. HC themes must use solid colors (avoid transparency) and set explicit borders via contrastBorder. Use color transforms for derived colors: transparent(), darken(), lighten(), oneOf(). Reference existing colors when possible instead of hardcoding hex values. 2. Color Categories File Colors ------ -------- src/vs/platform/theme/common/colors/baseColors.ts foreground, focusBorder, contrastBorder, text links src/vs/platform/theme/common/colors/editorColors.ts Editor widgets, find match, errors/warnings src/vs/platform/theme/common/colors/inputColors.ts Input, toggle, validation src/vs/platform/theme/common/colors/listColors.ts List/tree selection, focus, hover, drop src/vs/platform/theme/common/colors/miscColors.ts Badge, scrollbar, progress bar, sash src/vs/workbench/common/theme.ts Tabs, sidebar, status bar, panels, editor groups, banner 3. Using Colors in CSS Colors are injected as CSS custom properties on .monaco-workbench: Conversion functions in colorUtils.ts: asCssVariable(colorId) → 'var(--vscode-editor-background)' asCssVariableName(colorId) → '--vscode-editor-background' In CSS files, reference directly: 4. Widget Styles Pattern File: src/vs/platform/theme/browser/defaultStyles.ts Every widget type has a default style object and an override factory: Available defaults: defaultButtonStyles, defaultInputBoxStyles, defaultCheckboxStyles, defaultToggleStyles, defaultDialogStyles, defaultListStyles, defaultSelectBoxStyles, defaultMenuStyles, defaultProgressBarStyles, defaultCountBadgeStyles, defaultBreadcrumbsWidgetStyles, defaultKeybindingLabelStyles, defaultFindWidgetStyles. 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills microsoft/ux-theming