theming-extension-ui

Implements theme-aware UI for Visual Studio extensions using VsBrushes and VSColorTheme.

14|2|Updated Mar 24, 2026
One-click install
npx skills add https://github.com/madskristensen/vs-agent-plugins --skill theming-extension-ui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: theming-extension-ui
Source: https://github.com/madskristensen/vs-agent-plugins/tree/main/skills/theming-extension-ui
Command: npx skills add https://github.com/madskristensen/vs-agent-plugins --skill theming-extension-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensure WPF UI in Visual Studio extensions respects the active IDE color theme across Light, Dark, Blue, and High Contrast.

Core Features & Use Cases

  • Auto-theming of standard WPF controls via the VSIX Community Toolkit using Themes.UseVsTheme.
  • Explicit theming with EnvironmentColors and VsBrushes to style non-standard elements and runtime updates via VSColorTheme.
  • Use cases include theming tool windows, dialogs, and custom controls, with dynamic theme switching to reflect user changes.

Quick Start

Apply UseVsTheme to your UserControl or dialog and bind theme colors using EnvironmentColors or VsBrushes, then listen for VSColorTheme.ThemeChanged to refresh visuals.

Frequently Asked Questions about theming-extension-ui

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

FAQPage Schema
How do I theme WPF controls in a Visual Studio extension to match the IDE color theme?

To theme WPF controls in a Visual Studio extension, apply Themes.UseVsTheme from the VSIX Community Toolkit to your UserControl for auto-theming, or use EnvironmentColors and VsBrushes for explicit color bindings across Light, Dark, Blue, and High Contrast modes.

How do I handle runtime theme switching in Visual Studio tool windows?

Handle runtime theme switching in Visual Studio tool windows by implementing DynamicResource bindings for theme keys and subscribing to VSColorTheme.ThemeChanged events in your code-behind to refresh visuals when the user changes the active IDE theme.

What is the difference between auto-theming and explicit theming for VS extensions?

Auto-theming applies standard Visual Studio styles to WPF controls automatically via Themes.UseVsTheme, while explicit theming requires manually binding colors using EnvironmentColors and VsBrushes to style non-standard UI elements and custom controls.

Can I use EnvironmentColors and VsBrushes to style custom WPF dialogs in Visual Studio?

Yes, you can use EnvironmentColors and VsBrushes to explicitly style custom WPF dialogs in Visual Studio extensions, ensuring your UI elements respect the active environment colors across all standard IDE themes.

Why does my Visual Studio extension UI not update when switching to Dark mode?

Your Visual Studio extension UI may not update in Dark mode if it lacks DynamicResource bindings for theme keys or code-behind handling for VSColorTheme.ThemeChanged events, preventing it from responding to runtime theme updates.