Visual Studio 테마 색 현대화

Visual Studio 테마는 이전에 세분화된 기능별 색 토큰에 의존했습니다. 시간이 지남에 따라 이 방법은 수천 개의 맞춤형 값과 사용자 지정 색을 생성하여 일관성과 접근성을 보장하기가 더 어려워졌습니다. 이 문제를 해결하기 위해 보다 쉬운 유지 관리를 위한 의미 체계 토큰이 적고, 지속 가능한 접근성을 위한 예측 가능한 색 램프, Visual Studio, Windows 플랫폼 및 기타 Microsoft 도구에서 보다 응집력 있는 환경이라는 명확한 디자인 원칙을 중심으로 시스템을 다시 빌드했습니다.

이 문서에서는 변경된 내용과 이전 테마를 Visual Studio 2026과 호환되도록 마이그레이션하는 방법을 설명합니다.

변경 내용

Visual Studio 2022 이전에는 Visual Studio 테마에 약 34개의 범주와 최대 1,806개의 색 토큰이 포함되어 있습니다. 확장은 종종 더 추가됩니다. 이 밀도로 인해 몇 가지 문제가 발생했습니다.

많은 토큰은 거의 동일했으며, 색상이나 밝기에서 약간만 다르므로 시각적인 혼란과 혼란이 초래되었습니다.
개별 기능(예: CodeAnalysis, Diagnostics, ManifestDesigner 등)은 고유한 토큰을 생성하여 조각화되고 색 사용이 일관되지 않습니다.
많은 수의 사용자 지정 항목으로 인해 접근성에 대한 색 대비를 확인하는 것이 어려웠습니다.
화면이 일치하지 않거나 동기화되지 않은 것처럼 보이면서 전체 사용자 환경이 일치하지 않게 되었습니다.

다음은 Visual Studio 2022 테마의 범주 및 색 토큰 예제입니다.

<Theme ...>
...
<Category Name="CodeAnalysis" ...>
   <Color Name="RenameError">...</Color>
   <Color Name="RenameResolvableConflict">...</Color>
</Category>
<Category Name="Diagnostics"...>
...
   <Color Name="AdvancedListItemSelected">
      <Background ... />
      <Foreground ... />
   </Color>
   <Color Name="ButtonBackgroundDisabled">...</Color>
   <Color Name="ButtonBorderDisabled">
      <Background ... />
   </Color>
   <Color Name="ButtonTextDisabled">
      <Background ... />
   </Color>
...
</Category>
...
<!-- many more feature-scoped categories and hundreds of tokens -->
</Theme>

Visual Studio 2026은 예측 가능한 명명 계층을 사용하여 토큰을 소수의 의도 우선 범주로 통합합니다. 이제 기본 제공 셸 테마에는 최상위 범주 4개와 색 토큰 229개(최대 87개% 감소)만 포함됩니다.

다음은 Visual Studio 2026 테마의 의미 체계, 의도 우선 토큰의 예입니다.

<Theme ...>
<Category Name="Shell">
...
   <Color Name="ControlFillSecondary"> ... </Color>
   <Color Name="TextFillPrimary"> ... </Color>
   <Color Name="SolidBackgroundFillBase"> ... </Color>
...
</Category>
</Theme>

더 적은 토큰이 더 나은 UX 잠금을 해제하는 이유

의도 우선 이름 지정: 토큰 이름은 해당 역할 (예: ControlFill, TextFill, AccentFill, Stroke, SystemFill) 및 계층(기본, 보조, 3차)을 명확하게 반영하여 사용량을 직관적으로 만듭니다.
간소화된 색상표: 작은 공유 토큰 집합을 업데이트하면 셸과 확장 모두에서 일관성이 즉시 향상됩니다.
더 높은 일관성: 사용자 지정 지점이 적으면 실수로 인한 불일치가 줄어들고 약간 다른 변형이 제거됩니다.
향상된 접근성: 중앙 집중식 색 램프 및 의미 체계 상태(성공, 주의, 중요, 주의)는 대비 유효성 검사를 더 쉽고 안정적으로 만듭니다.
성능 및 유지 관리 효율성 향상: 의미 체계 계층은 세분화된 색 세터를 대체하여 유지 관리 오버헤드를 줄이고 UI 품질을 개선합니다.

Visual Studio 2026으로 테마 마이그레이션

기존 토큰을 작은 새 의미 체계 토큰 집합과 병합하여 이전 테마를 Visual Studio 2026과 호환되도록 만들 수 있습니다. 이전의 모든 토큰을 다시 만들 필요는 없습니다. Visual Studio 2026은 먼저 새 토큰을 읽은 다음 이전 토큰으로 돌아갑니다. 방법은 다음과 같습니다.

개체에 개체를 FallbackId="{Light or Dark theme GUID}" 추가 <Theme /> 합니다.

기본으로 사용할 테마	FallbackId
Light	{de3dbbcd-f642-433c-8353-8f1df4370aba}
Dark	{1ded0138-47ce-435e-84ef-9ec1f439b749}

이전 테마 토큰 이후의 마지막 두 범주로 아래 토큰 집합을 추가합니다. 범주 이름과 GUID가 아래와 정확하게 복사되었는지 확인합니다.

조명 기반 테마에 대한 최소 토큰 집합 시작

<Theme Name="MyAwesomeLightTheme" ...>
<!-- existing theme categories here -->
<Category Name="Shell" GUID="{73708ded-2d56-4aad-b8eb-73b20d3f4bff}">
   <Color Name="AccentFillDefault">
      <Background Type="CT_RAW" Source="FF5649B0" />
   </Color>
   <Color Name="AccentFillSecondary">
      <Background Type="CT_RAW" Source="E55649B0" />
   </Color>
   <Color Name="AccentFillTertiary">
      <Background Type="CT_RAW" Source="CC5649B0" />
   </Color>
   <Color Name="SolidBackgroundFillTertiary">
      <Background Type="CT_RAW" Source="FFF9F9F9" />
   </Color>
   <Color Name="SolidBackgroundFillQuaternary">
      <Background Type="CT_RAW" Source="FFFFFFFF" />
   </Color>
   <Color Name="SurfaceBackgroundFillDefault">
      <Background Type="CT_RAW" Source="FFF9F9F9" />
   </Color>
   <Color Name="TextFillSecondary">
      <Background Type="CT_RAW" Source="9E000000" />
   </Color>
</Category>
<Category Name="ShellInternal" GUID="{5af241b7-5627-4d12-bfb1-2b67d11127d7}">
   <Color Name="EnvironmentBackground">
      <Background Type="CT_RAW" Source="FFEEEEEE" />
   </Color>
   <Color Name="EnvironmentBorder">
      <Background Type="CT_RAW" Source="FF5649B0" />
   </Color>
   <Color Name="EnvironmentIndicator">
      <Background Type="CT_RAW" Source="66757575" />
   </Color>
   <Color Name="EnvironmentLogo">
      <Background Type="CT_RAW" Source="FF5649B0" />
   </Color>
   <Color Name="EnvironmentLayeredBackground">
      <Background Type="CT_RAW" Source="80FFFFFF" />
   </Color>
</Category>
</Theme>

어두운 테마를 위한 최소 토큰 세트 시작

<Theme Name="MyAwesomeDarkTheme" ...>
<!-- existing theme categories here -->
<Category Name="Shell" GUID="{73708ded-2d56-4aad-b8eb-73b20d3f4bff}">
   <Color Name="AccentFillDefault">
      <Background Type="CT_RAW" Source="FF9184EE" />
   </Color>
   <Color Name="AccentFillSecondary">
      <Background Type="CT_RAW" Source="80000000" />
   </Color>
   <Color Name="AccentFillTertiary">
      <Background Type="CT_RAW" Source="CC9184EE" />
   </Color>
   <Color Name="SolidBackgroundFillTertiary">
      <Background Type="CT_RAW" Source="FF282828" />
   </Color>
   <Color Name="SolidBackgroundFillQuaternary">
      <Background Type="CT_RAW" Source="FF2C2C2C" />
   </Color>
   <Color Name="SurfaceBackgroundFillDefault">
      <Background Type="CT_RAW" Source="FF2C2C2C" />
   </Color>
   <Color Name="TextFillSecondary">
      <Background Type="CT_RAW" Source="C8FFFFFF" />
   </Color>
</Category>
<Category Name="ShellInternal" GUID="{5af241b7-5627-4d12-bfb1-2b67d11127d7}">
   <Color Name="EnvironmentBackground">
      <Background Type="CT_RAW" Source="FF1C1C1C" />
   </Color>
   <Color Name="EnvironmentBorder">
      <Background Type="CT_RAW" Source="FF9184EE" />
   </Color>
   <Color Name="EnvironmentIndicator">
      <Background Type="CT_RAW" Source="66757575" />
   </Color>
   <Color Name="EnvironmentLogo">
      <Background Type="CT_RAW" Source="FF9184EE" />
   </Color>
   <Color Name="EnvironmentLayeredBackground">
      <Background Type="CT_RAW" Source="4D3A3A3A" />
   </Color>
</Category>
</Theme>

필요에 따라 이전 테마에 맞게 색 값을 조정합니다.

자주 묻는 질문(FAQ)

이것이 왜 획기적인 변화였을까요?

테마 색 토큰 구조 및 명명 규칙 변경 외에도 대부분의 UI 코드는 이전 기능 범위 토큰 또는 인라인 스타일 대신 Fluent 디자인 시스템의 의미 체계 스타일 토큰을 사용하도록 리팩터링되었습니다. 대부분의 이전 색 및 기타 스타일 리소스는 SDK에 남아 있지만 최신 디자인을 반영하거나 현대화된 UI에서 일관되게 동작하지 않을 수 있습니다.

이전 토큰을 계속 사용할 수 있나요?

이전 토큰은 일부 이전 표면에 대해 여전히 해결될 수 있지만 새 및 리팩터링된 UI 경로는 먼저 새로운 시맨틱 토큰을 읽습니다. 사용되지 않는 토큰을 사용하는 경우 불완전한 테마를 사용할 위험이 있습니다.

클래식 블루 테마는 어디에 있나요?

착색된 테마와 엑스트라 콘트라스트 편집기 외관 옵션 제품군으로 대체했습니다. 더 가까운 경의를 표하려면 커뮤니티 블루 스틸 테마를 설치할 수도 있습니다.

토큰이 적다는 것은 사용자 지정을 줄이는 것을 의미합니까?

아니요--- 의미 체계 계층을 사용하면 작은 색상표를 조정하여 광범위한 시각적 변화를 만들 수 있습니다. 테마 컬러, 배경 광도 단계 및 시스템 채우기를 통해 고유한 개성을 만들 수 있습니다.

성능에 영향을 주나요?

리팩터링하면 스타일 조회 및 중복 리소스가 줄어들고 메모리 지역성이 향상되고 지연된 브러시 만들기가 간소화됩니다.

편집기 색도 변경되고 있나요?

편집기에서는 현재 대부분의 구문 색 지정을 유지합니다. 이 변경은 도구 창, 메뉴 및 대화 상자와 같은 셸 UI 공유 화면을 대상으로 합니다. 편집기 모양(추가 대비 포함)을 독립적으로 선택할 수 있습니다.

Last updated on 2025-11-20