VSIX 颜色编辑器 - Visual Studio (Windows)

如何使用该工具

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

创建新的颜色标记

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

确定新颜色标记的类别和标记名称。

选择 UI 元素将用于每个主题的色调以及高对比度的系统颜色。

使用颜色编辑器创建新的颜色标记。

在 Visual Studio 扩展中使用颜色。

在 Visual Studio 中测试更改。

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

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

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

标记名称必须清楚地指示将应用颜色的元素类型和情况或“状态”。例如，活动数据提示的 [UI 类型] 可以命名为“ DataTip ”， [State] 可以命名为“ Active ”，从而生成颜色名称“ DataTipActive ”。由于数据提示包含文本，因此需要定义前景色和背景色。通过使用背景/前景配对，颜色编辑器将自动为背景创建“ DataTipActive ”颜色，为前景创建“ DataTipActiveText ”颜色。

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

一些常见的州名称包括：

MouseOver

MouseDown

已设定焦点

列表项控件部分的几个标记名称示例：

ListItem

ListItemBorder

ListItemMouseOver

ListItemMouseOverBorder

ListItemSelected

ListItemSelectedBorder

ListItemDisabled

ListItemDisabledBorder

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

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

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

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

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

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

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

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

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

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

完成颜色标记的创建、设置和编辑后，请将其保存为所需的.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">
    <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 颜色编辑器关闭时，此临时主题将消失。
若要使更改永久化，请在将新颜色添加到 .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>