skills.rest
az0512124155azz-sys
az0512124155azz-sysCOMMUNITY
Explore all skills by this author →
GitHub

ux-theming

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling VS Code workbench widgets without hardcoded colors, broken focus indicators, or missing high-contrast support leads to inconsistent UI and failed code reviews. This Skill provides the exact patterns for registering theme colors, applying CSS variables, and meeting HC/focus compliance 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. - 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), focus trapping for modal dialogs, and HC-specific overrides using contrastBorder and .hc-black/.hc-light selectors. - Use Case: When adding a new custom widget to the workbench, use this Skill to register its background and border colors, wire CSS variables into its stylesheet, and ensure it renders correctly in high-contrast themes without hardcoded hex values. ## Quick Start Ask the AI to register a new theme color for a custom widget and style it with proper focus indicators and high-contrast support.

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 from colorUtils.ts with a color ID, defaults for all four theme types (light, dark, hcDark, hcLight), and a localized description. Reference existing colors or use transforms like transparent(), darken(), and lighten() for derived values.

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

Colors are injected as CSS custom properties on .monaco-workbench, so a color ID like editor.background becomes var(--vscode-editor-background). Use asCssVariable(colorId) in TypeScript or reference the variable directly in stylesheets.

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/.hc-light selectors or isHighContrast() for HC-specific behavior.

How do I add a focus indicator to a custom VS Code widget?▼

Apply an outline with var(--vscode-focusBorder), outline-offset of -1px, and suppress the ring on active state. Use the .synthetic-focus class for programmatic focus, and trap focus with dom.trackFocus() for modal dialogs.

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

Hardcoded hex values, rgba shadows, and fixed border colors break theme switching and high-contrast accessibility. All color, shadow, and border values must come from registered color tokens or var(--vscode-*) CSS variables, with zero and structural percentages as the only exceptions.

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
obulaiobulai
1

obul-x402endpoints-firecrawl

Scrape, crawl, map, and extract structured data via Obul proxy with Firecrawl x402 endpoints.

Official
Intermediate