색상 테마

Visual Studio Code 사용자 인터페이스에서 보이는 색상은 두 가지 범주로 나뉩니다.

작업 표시줄부터 상태 표시줄까지 보기와 편집기에서 사용되는 워크벤치 색상입니다. 이 모든 색상의 전체 목록은 테마 색상 참조에서 찾을 수 있습니다.
편집기에서 소스 코드에 사용되는 구문 색상 및 스타일입니다. 구문 색상 지정은 TextMate 문법 및 TextMate 테마뿐만 아니라 의미론적 토큰을 기반으로 하므로 이러한 색상의 테마 지정은 다릅니다.

이 가이드에서는 테마를 만들 수 있는 다양한 방법에 대해 설명합니다.

워크벤치 색상

새 워크벤치 색상 테마를 만드는 가장 쉬운 방법은 기존 색상 테마로 시작하여 사용자 지정하는 것입니다. 먼저 수정하려는 색상 테마로 전환한 다음 설정을 열고 workbench.colorCustomizations 설정을 변경합니다. 변경 사항은 VS Code 인스턴스에 실시간으로 적용됩니다.

다음은 예를 들어 제목 표시줄의 배경색을 변경하는 것입니다.

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#ff0000"
  }
}

테마 지정 가능한 모든 색상의 전체 목록은 색상 참조에서 찾을 수 있습니다.

구문 색상

구문 강조 색상의 경우 두 가지 접근 방식이 있습니다. 커뮤니티의 기존 TextMate 테마(.tmTheme 파일)를 참조하거나 자체 테마 규칙을 만들 수 있습니다. 가장 쉬운 방법은 위에서 설명한 워크벤치 색상 섹션과 마찬가지로 기존 테마로 시작하여 사용자 지정하는 것입니다.

먼저 사용자 지정할 색상 테마로 전환하고 editor.tokenColorCustomizations 설정을 사용합니다. 변경 사항은 VS Code 인스턴스에 실시간으로 적용되며 새로 고침이나 다시 로드가 필요하지 않습니다.

예를 들어 다음은 편집기 내 주석의 색상을 변경합니다.

{
  "editor.tokenColorCustomizations": {
    "comments": "#FF0000"
  }
}

이 설정은 '주석', '문자열', '숫자'와 같은 일반적인 토큰 유형 집합으로 간단한 모델을 지원합니다. 그 이상으로 색상을 지정하려면 구문 강조 표시 가이드에 자세히 설명된 TextMate 테마 규칙을 직접 사용해야 합니다.

의미론적 색상

의미론적 강조 표시는 VS Code 릴리스 1.43에서 TypeScript 및 JavaScript에서 사용할 수 있습니다. 곧 다른 언에서도 채택될 것으로 예상합니다.

의미론적 강조 표시는 프로젝트를 더 완벽하게 이해하는 언어 서비스의 기호 정보를 기반으로 구문 색상을 풍부하게 합니다. 언어 서버가 실행되고 의미론적 토큰을 계산하면 색상 변경이 나타납니다.

각 테마는 테마 정의의 특정 설정을 사용하여 의미론적 강조 표시를 활성화할지 여부를 제어합니다. 각 의미론적 토큰의 스타일은 테마의 스타일 규칙에 의해 정의됩니다.

사용자는 editor.tokenColorCustomizations 설정을 사용하여 의미론적 강조 표시 기능 및 색상 규칙을 재정의할 수 있습니다.

특정 테마에 대한 의미론적 강조 표시 활성화

"editor.tokenColorCustomizations": {
    "[Material Theme]": {
        "semanticHighlighting": true
    }
},

테마는 구문 강조 표시 가이드에 설명된 대로 의미론적 토큰에 대한 테마 규칙을 정의할 수 있습니다.

새로운 색상 테마 만들기

workbench.colorCustomizations 및 editor.tokenColorCustomizations를 사용하여 테마 색상을 조정한 후 실제 테마를 만들 차례입니다.

명령 팔레트에서 개발자: 현재 설정에서 색상 테마 생성 명령을 사용하여 테마 파일을 생성합니다.
VS Code의 Yeoman 확장 생성기를 사용하여 새 테마 확장을 생성합니다.
```
npm install -g yo generator-code
yo code
```
위에 설명된 대로 테마를 사용자 지정한 경우 '처음부터 시작'을 선택합니다.
설정에서 생성된 테마 파일을 새 확장으로 복사합니다.

확장 생성기에서 TextMate 테마 파일(.tmTheme)을 가져와 VS Code에서 사용할 수 있도록 패키징하도록 지시하여 기존 TextMate 테마를 사용할 수도 있습니다. 또는 이미 테마를 다운로드한 경우 tokenColors 섹션을 .tmTheme 파일에 대한 링크로 바꿔서 사용합니다.

{
  "type": "dark",
  "colors": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "editorIndentGuide.background": "#404040",
    "editorRuler.foreground": "#333333",
    "activityBarBadge.background": "#007acc",
    "sideBarTitle.foreground": "#bbbbbb"
  },
  "tokenColors": "./Diner.tmTheme"
}

팁: 색상 정의 파일에 -color-theme.json 접미사를 지정하면 편집 시 도구 설명, 코드 완성, 색상 장식 및 색상 선택기를 얻을 수 있습니다.

팁: ColorSublime에는 수백 가지의 기존 TextMate 테마가 있습니다. 좋아하는 테마를 선택하고 다운로드 링크를 복사하여 Yeoman 생성기에 사용하거나 확장 프로그램에 사용합니다. 형식은 "https://raw.githubusercontent.com/Colorsublime/Colorsublime-Themes/master/themes/(name).tmTheme"과 같습니다.

새로운 색상 테마 테스트

새 테마를 시험해 보려면 F5 키를 눌러 확장 개발 호스트 창을 시작합니다.

거기에서 파일 > 기본 설정 > 테마 > 색상 테마로 색상 테마 선택기를 열면 드롭다운 목록에서 테마를 볼 수 있습니다. 위아래로 화살표를 사용하여 테마의 라이브 미리 보기를 확인합니다.

select my theme

테마 파일의 변경 사항은 확장 개발 호스트 창에 실시간으로 적용됩니다.

확장 마켓플레이스에 테마 게시

새 테마를 커뮤니티와 공유하고 싶다면 확장 마켓플레이스에 게시할 수 있습니다. vsce 게시 도구를 사용하여 테마를 패키징하고 VS Code 마켓플레이스에 게시합니다.

팁: 사용자가 테마를 쉽게 찾을 수 있도록 확장 설명에 "theme"이라는 단어를 포함하고 package.json에서 Category를 Themes로 설정합니다.

VS Code 마켓플레이스에서 확장 프로그램이 멋지게 보이도록 하는 방법에 대한 권장 사항도 있습니다. 마켓플레이스 프레젠테이션 팁을 참조하세요.

새로운 색상 ID 추가

색상 ID는 색상 기여 지점을 통해 확장에서 기여할 수도 있습니다. 이러한 색상은 workbench.colorCustomizations 설정 및 색상 테마 정의 파일에서 코드 완성 시에도 나타납니다. 사용자는 확장 프로그램 기여 탭에서 확장이 정의한 색상을 볼 수 있습니다.

추가 자료

CSS 트릭 - VS Code 테마 만들기

12/10/2025