VSIX 颜色编辑器

项目
10/10/2023

Visual Studio 扩展颜色编辑器工具可以创建和编辑 Visual Studio 的自定义颜色。该工具还可以生成主题资源键，以便可以在代码中使用颜色。此工具可用于为支持主题的 Visual Studio 扩展创建颜色。此工具可以打开 .pkgdef 和 .xml 文件。 Visual Studio 主题（.vstheme 文件）可以通过将文件扩展名更改为 .xml 来与 Visual Studio 扩展颜色编辑器一起使用。此外，可以将 .vstheme 文件导入到当前的 .xml 文件中。

VSIX Color Editor Hero

包定义文件

包定义（.pkgdef）文件是定义主题的文件。颜色本身存储在主题颜色 .xml 文件中，这些文件编译为 .pkgdef 文件。 .pkgdef 文件部署到 Visual Studio 可搜索位置，在运行时进行处理，并合并在一起以定义主题。

颜色标记

颜色标记由四个元素组成：

类别名称： 一组颜色的逻辑分组。如果已有特定于所需 UI 元素或 UI 元素组的颜色，请使用现有类别名称。
令牌名称： 颜色标记和令牌集的描述性名称。集包括背景和前台（文本）标记名称及其所有状态，并且应命名这些名称，以便可以轻松识别它们应用于的对和状态。
颜色值（或色调）： 每个彩色主题都需要。始终在一对中创建背景和文本颜色值。颜色对背景/前景色配对，以便文本（前景）颜色始终可读到它所绘制的背景色。这些颜色链接在一起，将在 UI 中一起使用。如果背景不适合与文本一起使用，请不要定义前景色。
系统颜色名称： 用于高对比度显示器。

如何使用该工具

应尽可能多地重复使用现有的 Visual Studio 颜色，而不是制作新颜色。但是，对于未定义适当颜色的情况，应创建自定义颜色以保持扩展主题兼容。

创建新的颜色令牌

若要使用 Visual Studio 扩展颜色编辑器创建自定义颜色，请执行以下步骤：

确定新颜色标记的类别和标记名称。
选择 UI 元素将用于每个主题的色调以及高对比度的系统颜色。
使用颜色编辑器创建新的颜色标记。
使用 Visual Studio 扩展中的颜色。
测试 Visual Studio 中的更改。

步骤 1：确定新颜色标记的类别和令牌名称。

VSColor 的首选命名方案是 [类别] [UI 类型] [State]。请勿在 VSColor 名称中使用“color”一词，因为它是冗余的。

类别名称提供逻辑分组，应尽可能窄地定义。例如，单个工具窗口的名称可以是类别名称，但整个业务部门或项目团队的名称不是。将条目分组为类别有助于防止颜色之间具有相同名称的混淆。

令牌名称必须明确指示元素类型和应用颜色的情况或“状态”。例如，活动数据提示的 [UI 类型] 可以命名为“DataTip”，并且 [State] 可以命名为“Active”，从而导致颜色名称为“DataTipActive”。由于数据提示具有文本，因此需要定义前景色和背景色。通过使用背景/前景配对，颜色编辑器会自动为背景创建颜色“DataTipActive”，并为前台创建“DataTipActiveText”。

如果 UI 部分只有一个状态， 则可以省略名称的 [State] 部分。例如，如果搜索框具有边框，并且没有影响边框颜色的状态更改，则边框颜色标记的名称只需称为“SearchBoxBorder”。

一些常见的状态名称包括：

活动
非活动
MouseOver
MouseDown
选定
Focused

列表项控件的一些标记名称的示例：
ListItem
ListItemBorder
ListItemMouseOver
ListItemMouseOverBorder
ListItemSelected
ListItemSelectedBorder
ListItemDisabled
ListItemDisabledBorder

步骤 2：选择 UI 元素将用于每个主题的色调和高对比度的系统颜色。

为 UI 选择自定义颜色时，请选择类似的现有 UI 元素，并将其颜色用作基本颜色。内置 UI 元素的颜色经过了评审和测试，因此它们在所有主题中看起来都合适且行为正确。

步骤 3：使用颜色编辑器创建新的颜色标记。

启动颜色编辑器并打开或创建新的自定义主题颜色 .xml 文件。从菜单中选择“ 编辑 > 新颜色 ”。此时会打开一个对话框，用于指定类别以及该类别中颜色条目的一个或多个名称：

选择现有类别，或选择“新建类别”以创建新类别。另一个对话框将打开，创建新的类别名称：

然后，新类别将在“新建颜色”类别下拉菜单中可用。选择类别后，为每个新颜色标记输入一行名称，并在完成后选择“创建”：

颜色值以背景/前景对显示，其中“无”表示尚未定义颜色。注意：如果颜色没有文本颜色/背景色对，则只需定义背景。

若要编辑颜色标记，请选择该标记的主题（列）的颜色条目。通过键入 8 位 ARGB 格式的十六进制颜色值、在单元格中输入系统颜色名称或使用下拉菜单通过一组颜色滑块或系统颜色列表选择所需颜色来添加颜色值。

对于不需要显示文本的组件，请输入一个颜色值：背景色。否则，输入背景和文本颜色的值，用正斜杠分隔。

输入高对比度值时，输入有效的 Windows 系统颜色名称。不要输入硬编码的 ARGB 值。可以通过从颜色值下拉菜单中选择“Background： System”或“Foreground： System”来查看有效的系统颜色名称列表。创建具有文本组件的元素时，请使用正确的背景/文本系统颜色对或文本可能不可读。

完成创建、设置和编辑颜色标记后，将它们保存到所需的 .xml 或 .pkgdef 格式。没有背景和前景集的颜色标记将以 .xml 格式保存为空颜色，但以 .pkgdef 格式取消卡。如果尝试将空颜色保存到 .pkgdef 文件中，对话框将警告你潜在的颜色丢失。

步骤 4：使用 Visual Studio 扩展中的颜色。

定义新颜色标记后，在项目文件中包括 .pkgdef，将“生成操作”设置为“内容”，将“包含在 VSIX 中”设置为“True”。

在 Visual Studio 扩展颜色编辑器中，选择“文件 > 视图资源代码”以查看用于在基于 WPF 的 UI 中访问自定义颜色的代码。

将此代码包含在项目中的静态类中。对 Microsoft.VisualStudio.Shell 的引用。<需要将 VSVersion.0.dll> 添加到项目才能使用 ThemeResourceKey 类型。

namespace MyCustomColors
{
    public static class MyCategory
    {
        #region Autogenerated resource keys
        // These resource keys are generated by Visual Studio Extension Color Editor, and should be replaced when new colors are added to this category.
        public static readonly Guid Category = new Guid("faf7f3f9-9fe5-4dd3-9350-59679617dfbe");

        private static ThemeResourceKey _MyColor1ColorKey;
        private static ThemeResourceKey _MyColor1BrushKey;
        private static ThemeResourceKey _MyColor1TextColorKey;
        private static ThemeResourceKey _MyColor1TextBrushKey;
        public static ThemeResourceKey MyColor1ColorKey { get { return _MyColor1ColorKey ?? (_MyColor1ColorKey = new ThemeResourceKey(Category, "MyColor1", ThemeResourceKeyType.BackgroundColor)); } }
        public static ThemeResourceKey MyColor1BrushKey { get { return _MyColor1BrushKey ?? (_MyColor1BrushKey = new ThemeResourceKey(Category, "MyColor1", ThemeResourceKeyType.BackgroundBrush)); } }
        public static ThemeResourceKey MyColor1TextColorKey { get { return _MyColor1TextColorKey ?? (_MyColor1TextColorKey = new ThemeResourceKey(Category, "MyColor1", ThemeResourceKeyType.ForegroundColor)); } }
        public static ThemeResourceKey MyColor1TextBrushKey { get { return _MyColor1TextBrushKey ?? (_MyColor1TextBrushKey = new ThemeResourceKey(Category, "MyColor1", ThemeResourceKeyType.ForegroundBrush)); } }
        #endregion
    }
}

这允许访问 XAML 代码中的颜色，并允许 UI 响应主题更改。

<UserControl x:Class="NewTestProject.TestPackageControl" Name="MyToolWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:ns="clr-namespace:MyCustomColors">
  <Grid>
    <TextBlock Background="{DynamicResource {x:Static ns:MyCategory.MyColor1BrushKey}}"
               Foreground="{DynamicResource {x:Static ns:MyCategory.MyColor1TextBrushKey}}"
      >Sample Text</TextBlock>

  </Grid>
</UserControl>

步骤 5：测试 Visual Studio 中的更改。

颜色编辑器可以暂时将颜色标记应用于 Visual Studio 正在运行的实例，以查看对颜色的实时更改，而无需重新生成扩展包。为此，请单击位于每个主题列标题上的“将此主题应用到正在运行的 Visual Studio 窗口”按钮。当 VSIX 颜色编辑器关闭时，此临时主题将消失。

VSIX Color Editor Apply

若要永久更改，在将新颜色添加到 .pkgdef 文件并编写将使用这些颜色的代码后，重新生成和重新部署 Visual Studio 扩展。重新生成 Visual Studio 扩展会将新颜色的注册表值合并到主题的其余部分。然后重新启动 Visual Studio，查看 UI，并验证新颜色是否按预期显示。

说明

此工具用于为预先存在的 Visual Studio 主题创建自定义颜色，或用于编辑自定义 Visual Studio 主题的颜色。若要创建自定义 Visual Studio 主题，请从 Visual Studio 扩展库下载 Visual Studio 颜色主题编辑器扩展。

示例输出

XML 颜色输出

该工具生成的 .xml 文件将如下所示：

<Themes>
  <Theme Name="Light" GUID="{de3dbbcd-f642-433c-8353-8f1df4370aba}">
    <Category Name="CategoryName" GUID="{eee9d521-dac2-48d9-9a5e-5c625ba2040c}">
      <Color Name="ColorName1">
        <Background Type="CT_RAW" Source="FFFFFFFF" />
      </Color>
      <Color Name="ColorName2">
        <Background Type="CT_RAW" Source="FFFFFFFF" />
        <Foreground Type="CT_RAW" Source="FF000000" />
      </Color>
      <Color Name="ColorName3">
        <Background Type="CT_RAW" Source="FFFF0000" />
      </Color>
      <Color Name="ColorName4">
        <Background Type="CT_RAW" Source="FF000088" />
        <Foreground Type="CT_RAW" Source="FFFFFFFF" />
      </Color>
    </Category>
  </Theme>
  <Theme Name="Dark" GUID="{1ded0138-47ce-435e-84ef-9ec1f439b749}">...</Theme>
  <Theme Name="Blue" GUID="{a4d6a176-b948-4b29-8c66-53c97a1ed7d0}">...</Theme>
  <Theme Name="HighContrast" GUID="{a5c004b4-2d4b-494e-bf01-45fc492522c7}">...</Theme>
</Themes>

PKGDEF 颜色输出

该工具生成的 .pkgdef 文件如下所示：

[$RootKey$\Themes\{de3dbbcd-f642-433c-8353-8f1df4370aba}\CategoryName]
"Data"=hex:78,00,00,00,0b,00,00,00,01,00,00,00,21,d5,e9,ee,c2,da,d9,48,9a,5e,5c,62,5b,a2,04,0c,04,00,00,00,0a,00,00,00,43,6f,6c,6f,72,4e,61,6d,65,31,01,ff,ff,ff,ff,00,0a,00,00,00,43,6f,6c,6f,72,4e,61,6d,65,32,01,ff,ff,ff,ff,01,00,00,00,ff,0a,00,00,00,43,6f,6c,6f,72,4e,61,6d,65,33,01,ff,00,00,ff,00,0a,00,00,00,43,6f,6c,6f,72,4e,61,6d,65,34,01,00,00,88,ff,01,ff,ff,ff,ff
[$RootKey$\Themes\{1ded0138-47ce-435e-84ef-9ec1f439b749}\CategoryName]
"Data"=hex:...
[$RootKey$\Themes\{a4d6a176-b948-4b29-8c66-53c97a1ed7d0}\CategoryName]
"Data"=hex:...
[$RootKey$\Themes\{a5c004b4-2d4b-494e-bf01-45fc492522c7}\CategoryName]
"Data"=hex:...

C# 资源密钥包装器

该工具生成的颜色资源键将如下所示：

namespace MyNamespace
{
    public static class MyColors
    {
        #region Autogenerated resource keys
        // These resource keys are generated by Visual Studio Extension Color Editor, and should be replaced when new colors are added to this category.

        public static string ColorName1ColorKey { get { return "ColorName1ColorKey"; } }
        public static string ColorName1BrushKey { get { return "ColorName1BrushKey"; } }

        public static string ColorName2ColorKey { get { return "ColorName2ColorKey"; } }
        public static string ColorName2BrushKey { get { return "ColorName2BrushKey"; } }
        public static string ColorName2TextColorKey { get { return "ColorName2TextColorKey"; } }
        public static string ColorName2TextBrushKey { get { return "ColorName2TextBrushKey"; } }

        public static string ColorName3ColorKey { get { return "ColorName4ColorKey"; } }
        public static string ColorName3BrushKey { get { return "ColorName4BrushKey"; } }
        public static string ColorName3TextColorKey { get { return "ColorName4TextColorKey"; } }
        public static string ColorName3TextBrushKey { get { return "ColorName4TextBrushKey"; } }
        #endregion
    }
}

WPF 资源字典包装器

该工具生成的颜色 ResourceDictionary 键将如下所示：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:colors="clr-namespace:MyNamespace">

  <SolidColorBrush x:Key="{x:Static colors:MyColors.ColorName1BrushKey}" Color="#FFFFFFFF" />
  <Color x:Key="{x:Static colors:MyColors.ColorName1ColorKey}" A="255" R="255" G="255" B="255" />

  <SolidColorBrush x:Key="{x:Static colors:MyColors.ColorName2BrushKey}" Color="#FFFFFFFF" />
  <Color x:Key="{x:Static colors:MyColors.ColorName2ColorKey}" A="255" R="255" G="255" B="255" />
  <SolidColorBrush x:Key="{x:Static colors:MyColors.ColorName2TextBrushKey}" Color="#FF000000" />
  <Color x:Key="{x:Static colors:MyColors.ColorName2TextColorKey}" A="255" R="0" G="0" B="0" />

  <SolidColorBrush x:Key="{x:Static colors:MyColors.ColorName3BrushKey}" Color="#FFFF0000" />
  <Color x:Key="{x:Static colors:MyColors.ColorName3ColorKey}" A="255" R="255" G="0" B="0" />

  <SolidColorBrush x:Key="{x:Static colors:MyColors.ColorName4BrushKey}" Color="#FF000088" />
  <Color x:Key="{x:Static colors:MyColors.ColorName4ColorKey}" A="255" R="0" G="0" B="136" />
  <SolidColorBrush x:Key="{x:Static colors:MyColors.ColorName4TextBrushKey}" Color="#FFFFFFFF" />
  <Color x:Key="{x:Static colors:MyColors.ColorName4TextColorKey}" A="255" R="255" G="255" B="255" />
</ResourceDictionary>

通过

VSIX 颜色编辑器

如何使用该工具

说明

示例输出

其他资源