색상 테마

Visual Studio Code 사용자 인터페이스에서 보여지는 색상은 2개의 카테고리로 나누어집니다:

액티비티 바에서 상태 바까지 뷰와 에디터에서 쓰이는 작업공간 색상. 이러한 모든 색상의 목록은 색상 테마 리퍼런스에서 확인 가능합니다.
에디터의 소스코드에서 구문에 쓰이는 색상. 이러한 색상의 테마는 TextMate의 문법과 테마에 따라 다릅니다.

이번 가이드에서는 여러분이 테마를 만드는 여러 방법들을 다룰 것입니다.

작업공간 색상

새 작업공간 색상 테마를 생성하는 가장 쉬운 방법은 이미 존재하는 색상 테마에서 시작해 수정 하는 것입니다. 첫번째로 여러분이 수정하기 원하는 색상 테마를 선택한 다음, 여러분의 settings 를 열어 workbench.colorCustomizations 설정을 수정하십시오. 변경된 설정은 VS Code에 즉시 반영 됩니다.

다음의 예시는, 타이틀 바의 색상을 변경 할 것입니다:

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

가능한 색상의 목록은 색상 리퍼런스에서 확인 할 수 있습니다.

구문 색상

구문을 색상으로 강조하기 위해, 2가지 접근 방법이 있습니다. 여러분은 단순히 기존의 TextMate 테마 (.tmTheme 파일)을 커뮤니티에서 참조하거나, 혹은 여러분만의 테마 규칙을 정할 수 있습니다. 가장 쉬운 방법은 위의 작업공간 색상에서 했던 것처럼 존재하는 테마를 커스터마이즈 하는 것 입니다.

우선 커스터마이즈 할 색상 테마로 교체 한 후, settings의 editor.tokenColorCustomizations를 수정하십시오. 변경 된 설정은 VS Code 인스턴스에 새로 고치거나 다시 로드 할 필요없이 즉시 반영 됩니다.

예를 들어, 다음은 에디터에서 커멘트의 색상을 변경 할 것입니다.

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

설정은 ‘comments’,’strings’, 혹은 ‘numbers’와 같은 공통된 토큰 타입으로 구성된 단순한 모델을 지원합니다. 만약 여러분이 이보다 더 많은 색상을 원하는 경우, 구문 강조 가이드에서 자세히 설명 되어 있는, TextMate 테마 규칙을 직접 사용해야 합니다.

새 색상 테마 생성

여러분이 workbench.colorCustomizations 와 editor.tokenColorCustomizations를 이용하여 색상 테마를 수정했었다면, 이제는 새로운 테마를 생성할 시간입니다.

Command Palette에서 Developer: Generate Color Theme from Current Settings 커맨드를 이용하여 테마 파일을 생성하십시오.
VS Code의 Yeoman 익스텐션 생성기를 이용하여, 새로운 테마 익스텐션을 생성하십시오.

   npm install -g yo generator-code
   yo code

만약 위와 같이 테마를 커스터마이즈 했었다면, Start fresh를 선택하십시오.

yo code theme

settings에서 생성된 테마 파일을 새 익스텐션으로 복사하십시오.

또한 여러분은 기존의 TextMate 테마를 익스텐션 생성기에 전달하여 TextMate 테마 파일(.tmTheme)를 불러오고, VS Code에서의 사용을 위해 패키징 할 수 있습니다. 아니면, 만약 이미 다운로드한 테마가 있는 경우, 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 generator나 여러분의 익스텐션 내부에 사용 하십시오. 링크는 다음과 같은 형태를 가질 것입니다. "https://raw.githubusercontent.com/Colorsublime/Colorsublime-Themes/master/themes/(name).tmTheme"

새 색상 테마 테스트

새 테마를 사용하기 위해, F5를 눌러 익스텐션 개발 호스트 창을 실행하십시오.

이후, File > Preferences > Color Theme에서 색상 테마 선택기를 열어 드롭다운 리스트에서 새 테마를 확인 할 수 있습니다. 테마의 프리뷰를 실시간으로 보기 위해 위 아래 화살표를 사용하십시오

select my theme

테마 파일의 수정은 Extension Development Host 창에 실시간으로 반영됩니다.

익스텐션 마켓플레이스에 테마 게시하기

여러분의 새 테마를 커뮤니티에 공유 하길 원한다면, Extension Marketplace에 게시 할 수 있습니다. vsce publishing tool를 사용하여 테마를 패키징 하고 VS Code 마켓플레이스에 게시하십시오.

팁: 사용자들이 테마를 쉽게 찾기 위해, “theme”라는 단어를 익스텐션 설명에 포함시키고 package.json의Category를 Theme로 설정하십시오.

VS Code 마켓플레이스에서 익스텐션이 더 멋지게 보이기 위한 조언들이 있습니다, Marketplace Presentation Tips를 확인 하십시오.

새 색상 Id 추가

색상 id는 color contribution point를 통해 익스텐션에 기여 할 수 있습니다. 이러한 색상들은 workbench.colorCustomizations 설정에서 코드 완성을 사용할때와, 색상 테마 정의 파일에서 사용 됩니다. 사용자는 익스텐션이 어떤 색상들을 정의하는지 extension contributions 탭에서 확인 할 수 있습니다.

추가 읽을거리

CSS Tricks - VS Code 테마 생성