skills.rest
Tyrizx
TyrizxOFFICIAL
Explore all skills by this author →
GitHub

ux-theming

Registers VS Code theme colors and styles widgets with CSS variables and high-contrast support.

Updated Aug 30, 2026
Search Tags:#theming#vscode#css variables#color tokens#focus indicators#high contrast#widget styling
One-click install
npx skills add https://github.com/Tyrizx/Tyrizx --skill ux-theming-tyrizx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-theming
Source: https://github.com/Tyrizx/Tyrizx/tree/main/.github/skills/ux-theming
Command: npx skills add https://github.com/Tyrizx/Tyrizx --skill ux-theming-tyrizx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? VS Code contributors often hardcode colors, shadows, and focus styles that break across light, dark, and high-contrast themes, causing review rejections and accessibility failures. This Skill provides the exact patterns for registering theme colors, styling widgets, and meeting focus and high-contrast requirements. ## Core Features & Use Cases - Color Registration: Register colors with defaults for light, dark, hcDark, and hcLight themes 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: You are adding a new workbench widget and need its background, border, and focus ring to adapt correctly across all four VS Code theme types without any hardcoded hex values. ## Quick Start Ask the assistant to register a new theme color for your widget and style it following VS Code theming and high-contrast rules.

Frequently Asked Questions about ux-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I register a new theme color in VS Code?▼

Use registerColor in src/vs/platform/theme/common/colorUtils.ts with a color ID, defaults for light, dark, hcDark, and hcLight themes, and a localized description. Reference existing colors or use transforms like transparent() and darken() instead of hardcoding hex values.

How do I use VS Code theme colors in CSS files?▼

Registered colors are injected as CSS custom properties on .monaco-workbench, so a color like editor.background becomes var(--vscode-editor-background). In TypeScript, use asCssVariable(colorId) from colorUtils.ts to generate the variable reference.

What are the high contrast theme requirements for VS Code widgets?▼

Always provide hcDark and hcLight defaults when registering colors, using Color.black and Color.white for backgrounds. Reference contrastBorder for borders, remove box shadows in HC mode, and use .hc-black or .hc-light CSS class selectors for HC-specific overrides.

How do I style a focus indicator in VS Code?▼

Use outline with var(--vscode-focusBorder), outline-offset of -1px, and suppress the ring on active elements with outline: 0 !important. Never hardcode a focus color, and use the .synthetic-focus class for programmatic focus indication.

Why are hardcoded colors flagged in VS Code code reviews?▼

Hardcoded hex values, rgba shadows, and fixed colors break theme adaptation and high-contrast accessibility. Reviewers require all color, shadow, and border values to come from registered color tokens or CSS variables like var(--vscode-widget-shadow).

Related Skills

Explore More Software Engineering Skills→
posit-devposit-dev
4.2k

ux-theming

Registers VS Code theme colors and styles widgets with theme tokens and high-contrast support.

Official
Intermediate
podman-desktoppodman-desktop
8.0k

storybook-record-video

Record MP4 videos of Storybook component stories across four themes using Playwright and ffmpeg.

Official
Intermediate
therealityreporttherealityreport

extract-css-tokens

Extract design tokens from CSS sources into a normalized CSSTokenMap JSON.

Community
Intermediate
az0512124155azz-sysaz0512124155azz-sys

ux-theming

Registers VS Code theme colors and styles widgets with theme tokens and high-contrast support.

Community
Intermediate