| layout | parent | title | nav_order | description |
|---|---|---|---|---|
default |
Extension Guides |
Color Theme |
3 |
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를 선택하십시오.
- 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에서 색상 테마 선택기를 열어 드롭다운 리스트에서 새 테마를 확인 할 수 있습니다. 테마의 프리뷰를 실시간으로 보기 위해 위 아래 화살표를 사용하십시오
테마 파일의 수정은 Extension Development Host 창에 실시간으로 반영됩니다.
여러분의 새 테마를 커뮤니티에 공유 하길 원한다면, Extension Marketplace에 게시 할 수 있습니다. vsce publishing tool를 사용하여 테마를 패키징 하고 VS Code 마켓플레이스에 게시하십시오.
팁: 사용자들이 테마를 쉽게 찾기 위해, "theme"라는 단어를 익스텐션 설명에 포함시키고
package.json의Category를Theme로 설정하십시오.
VS Code 마켓플레이스에서 익스텐션이 더 멋지게 보이기 위한 조언들이 있습니다, Marketplace Presentation Tips를 확인 하십시오.
색상 id는 color contribution point를 통해 익스텐션에 기여 할 수 있습니다. 이러한 색상들은 workbench.colorCustomizations 설정에서 코드 완성을 사용할때와, 색상 테마 정의 파일에서 사용 됩니다. 사용자는 익스텐션이 어떤 색상들을 정의하는지 extension contributions 탭에서 확인 할 수 있습니다.