VSIX 색 편집기

아티클
06/19/2023

Visual Studio 확장 색 편집기 도구는 Visual Studio에 대한 사용자 지정 색을 만들고 편집할 수 있습니다. 이 도구는 코드에서 색을 사용할 수 있도록 테마 리소스 키를 생성할 수도 있습니다. 이 도구는 테마 지정을 지원하는 Visual Studio 확장의 색을 만드는 데 유용합니다. 이 도구는 .pkgdef 및 .xml 파일을 열 수 있습니다. Visual Studio 테마(.vstheme 파일)는 파일 확장명을 .xml로 변경하여 Visual Studio 확장 색 편집기에서 사용할 수 있습니다. 또한 .vstheme 파일을 현재 .xml 파일로 가져올 수 있습니다.

VSIX Color Editor Hero

패키지 정의 파일

패키지 정의(.pkgdef) 파일은 테마를 정의하는 파일입니다. 색 자체는 .pkgdef 파일로 컴파일되는 테마 색 .xml 파일에 저장됩니다. .pkgdef 파일은 Visual Studio 검색 가능한 위치에 배포되고 런타임에 처리되며, 테마를 정의하기 위해 함께 병합됩니다.

색 토큰

색 토큰은 다음 네 가지 요소로 구성됩니다.

범주 이름: 색 집합에 대한 논리적 그룹화입니다. 원하는 UI 요소 또는 UI 요소 그룹과 관련된 색이 이미 있는 경우 기존 범주 이름을 사용합니다.
토큰 이름: 색 토큰 및 토큰 집합에 대한 설명이 포함된 이름입니다. 집합에는 배경 및 전경(텍스트) 토큰 이름과 모든 상태가 포함되며, 이러한 이름은 쌍과 해당 토큰이 적용되는 상태를 쉽게 식별할 수 있도록 지정해야 합니다.
색 값(또는 색조): 각 색 테마에 필요합니다. 항상 배경 및 텍스트 색 값을 쌍으로 만듭니다. 텍스트(전경) 색이 그려지는 배경색에 대해 항상 읽을 수 있도록 배경/전경에 대해 색이 쌍을 이룹니다. 이러한 색은 연결되며 UI에서 함께 사용됩니다. 배경이 텍스트와 함께 사용되지 않는 경우 전경색을 정의하지 마세요.
시스템 색 이름: 고대비 디스플레이에 사용합니다.

이 도구를 사용 하는 방법

가능한 한 많이, 그리고 적절한 경우 기존 Visual Studio 색을 새로 만드는 대신 다시 사용해야 합니다. 그러나 적절한 색이 정의되지 않은 경우 확장 테마를 호환되도록 사용자 지정 색을 만들어야 합니다.

새 색 토큰 만들기

Visual Studio 확장 색 편집기를 사용하여 사용자 지정 색을 만들려면 다음 단계를 수행합니다.

새 색 토큰의 범주 및 토큰 이름을 결정합니다.
UI 요소가 각 테마에 사용할 색조와 고대비의 시스템 색을 선택합니다.
색 편집기를 사용하여 새 색 토큰을 만듭니다.
Visual Studio 확장에서 색을 사용합니다.
Visual Studio에서 변경 내용을 테스트합니다.

1단계: 새 색 토큰의 범주 및 토큰 이름을 결정합니다.

VSColor의 기본 명명 체계는 [범주] [UI 유형] [상태]입니다. VSColor 이름에 "색"이라는 단어는 중복되므로 사용하지 마세요.

범주 이름은 논리적 그룹화를 제공하며 가능한 한 좁게 정의되어야 합니다. 예를 들어 단일 도구 창의 이름은 범주 이름일 수 있지만 전체 사업부 또는 프로젝트 팀의 이름은 그렇지 않습니다. 항목을 범주로 그룹화하면 이름이 같은 색 간의 혼동을 방지할 수 있습니다.

토큰 이름은 요소 형식과 상황 또는 색이 적용될 "상태"를 명확하게 나타내야 합니다. 예를 들어 활성 데이터 팁의 [UI 형식]은 "DataTip", [상태]는 "Active"로 지정하여 "DataTipActive."라는 색 이름을 지정할 수 있습니다. 데이터 팁에는 텍스트가 있으므로 전경색과 배경색을 모두 정의해야 합니다. 배경/전경 쌍을 사용하여 색 편집기는 배경에 "DataTipActive" 색상을, 전경에 "DataTipActiveText" 색을 자동으로 만듭니다.

UI 부분에 하나의 상태만 있는 경우 이름의 [상태] 부분을 생략할 수 있습니다. 예를 들어 검색 상자에 테두리가 있고 테두리 색상에 영향을 주는 상태 변경이 없는 경우 테두리 색 토큰의 이름은 간단히 "SearchBoxBorder"라고 할 수 있습니다.

몇 가지 일반적인 상태 이름은 다음과 같습니다.

활성화
비활성
MouseOver
MouseDown
선택한 상태
포커스

목록 항목 컨트롤의 일부에 대한 몇 가지 토큰 이름의 예:
ListItem
ListItemBorder
ListItemMouseOver
ListItemMouseOverBorder
ListItemSelected
ListItemSelectedBorder
ListItemDisabled
ListItemDisabledBorder

2단계: UI 요소가 각 테마에 사용할 색조와 고대비의 시스템 색을 선택합니다.

UI에 대한 사용자 지정 색을 선택할 때 비슷한 기존 UI 요소를 선택하고 해당 색을 기본으로 사용합니다. 기본 UI 요소의 색은 검토 및 테스트를 거쳤으므로 모든 테마에서 적절하게 표시되고 올바르게 동작합니다.

3단계: 색 편집기를 사용하여 새 색 토큰을 만듭니다.

색 편집기를 시작하고 새 사용자 지정 테마 색 .xml 파일을 열거나 만듭니다. 메뉴에서 편집> 새 색을 선택합니다. 그러면 해당 범주 내의 색 항목에 대한 범주 및 하나 이상의 이름을 지정하기 위한 대화 상자가 열립니다.

기존 범주를 선택하거나 새 범주를 선택하여 새 범주를 만듭니다. 다른 대화 상자가 열리고 새 범주 이름이 만들어집니다.

그러면 새 색 범주 드롭다운 메뉴에서 새 범주를 사용할 수 있습니다. 범주를 선택한 후 각 새 색 토큰마다 한 줄에 하나의 이름을 입력하고 완료되면 "만들기"를 선택합니다.

색 값은 배경/전경 쌍에 표시되며 색이 정의되지 않았음을 나타내는 "없음"이 표시됩니다. 참고: 색에 텍스트 색/배경색 쌍이 없는 경우 배경만 정의해야 합니다.

색 토큰을 편집하려면 해당 토큰의 테마(열)에 대한 색 항목을 선택합니다. 8자리 ARGB 형식으로 16진수 색 값을 입력하고 셀에 시스템 색 이름을 입력하거나, 드롭다운 메뉴를 사용하여 색 슬라이더 집합 또는 시스템 색 목록을 통해 원하는 색을 선택합니다.

텍스트를 표시할 필요가 없는 구성 요소의 경우 배경색이라는 색 값을 하나만 입력합니다. 그렇지 않으면 배경색과 텍스트 색의 값을 슬래시로 구분하여 입력합니다.

고대비 값을 입력할 때 유효한 Windows 시스템 색 이름을 입력합니다. 하드 코딩된 ARGB 값을 입력하지 마세요. 색 값 드롭다운 메뉴에서 "배경: 시스템" 또는 "전경: 시스템"을 선택하여 유효한 시스템 색 이름 목록을 볼 수 있습니다. 텍스트 구성 요소가 있는 요소를 만들 때 올바른 배경/텍스트 시스템 색 쌍을 사용하거나 텍스트를 읽을 수 없습니다.

색 토큰 만들기, 설정 및 편집을 마치면 원하는 .xml 또는 .pkgdef 형식으로 저장합니다. 배경이나 전경 집합이 없는 색 토큰은 .xml 형식인 경우 빈 색으로 저장되며 .pkgdef 형식인 경우 삭제됩니다. 빈 색상을 .pkgdef 파일에 저장하려고 하면 대화 상자가 잠재적인 색 손실에 대해 경고합니다.

4단계: Visual Studio 확장에서 색을 사용합니다.

새 색 토큰이 정의되면 "빌드 작업"이 "콘텐츠"로 설정되고 "VSIX에 포함"이 "True"로 설정된 프로젝트 파일에 .pkgdef가 포함됩니다.

Visual Studio 확장 색 편집기에서 파일 > 리소스 코드 보기를 선택하여 WPF 기반 UI의 사용자 지정 색에 액세스하는 데 사용되는 코드를 봅니다.

프로젝트의 정적 클래스에 이 코드를 포함합니다. ThemeResourceKey 형식을 사용하려면 Microsoft.VisualStudio.Shell.<VSVersion>.0.dll에 대한 참조를 프로젝트에 추가해야 합니다.

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 색 편집기

이 도구를 사용 하는 방법

주의

샘플 출력

추가 리소스