| layout | parent | title | nav_order | description |
|---|---|---|---|---|
default |
References |
Theme Color |
6 |
workbench.colorCustomizations 사용자 설정을 통해 활성화된 Visual Studio Code의 색상 테마를 커스텀 할 수 있습니다.
{
"workbench.colorCustomizations": {
"activityBar.background": "#00AA00"
}
}주의: 만약 기존의 색상 테마를 사용하려는 경우, 색상 테마를 참조하여 Preferences: Color Theme 드롭다운을 통해 (kb(workbench.action.selectTheme)) 활성 색상 테마를 설정하는 방법을 배우십시오.
색상 값은 투명값을 위한 알파 채널을 포함한 RGB 색상 모델로 정의 할 수 있습니다. 포맷으로는 다음 16진법 표기법이 지원됩니다 : #RGB, #RGBA, #RRGGBB 및 #RRGGBBAA. R(빨간색), G(녹색), B(파란색), 그리고 A(알파)는 16진수 문자 (0-9, a-f 혹은 A-F) 입니다. 3자리 표기법은 (#RGB) 6자리 표기법의 짧은 버전이고, (#RRGGBB) 4자리 RGB 표기법은 (#RGBA) 8자리 표기법의 (#RRGGBBAA) 짧은 버전입니다. 예를 들어 #e35f는 #ee3355ff와 같은 색상을 표현합니다.
만약 알파값이 정의 되지 않은 경우, 기본값인 ff로 (불투명, 투명도 없음) 설정 됩니다. 만약 알파가 00로 설정 되는 경우, 색상은 완전히 투명해집니다.
다른 주석 범위를 포함하지 않기 위해서, 일부 색상은 불투명 하지 않아야 합니다. 색상 설명을 확인하여 어떤 색상들이 이에 해당하는지 확인하십시오.
대비 색상은 일반적으로 고대비 테마에서만 설정됩니다. 만약 설정된 경우, UI에서 항목 주위에 테두리를 추가하여 대비를 높입니다.
contrastActiveBorder: 더 큰 대비를 위해 다른 엘리멘트와 구분하기 위한 활성 엘리멘트 주위의 추가 경계 입니다.contrastBorder: 엘리먼트 주변에 여분에 추가 경계를 두어, 다른 엘리멘트와 구분하여 대비를 높입니다.
focusBorder: 포커스된 엘리먼트의 전체 테두리 색입니다. 이는 컴포넌트에 의해 재정의되지 않는 경우에만 사용됩니다.foreground: 전체 전경색입니다. 이는 컴포넌트에 의해 재정의되지 않는 경우에만 사용됩니다.widget.shadow: 에디터 내부의 Find/Replace와 같은 위젯의 그림자 색상입니다.selection.background: 워크벤치에서 선택된 텍스트의 배경색입니다. (입력 필드 혹은 텍스트 영역의 경우로, 에디터나 터미널에는 적용되지 않습니다.descriptionForeground: 레이블과 같은 추가 정보를 제공하는 설명 텍스트의 전경색상입니다.errorForeground: 에러 메시지의 전체 전경색상입니다. (이는 컴포넌트에 의해 재정의되지 않는 경우에만 사용됩니다.)icon.foreground: 워크벤치에서의 아이콘의 기본 색상입니다.
VS Code 창 테두리를 위한 색상 테마 입니다.
window.activeBorder: 활성화된 (포커싱) 창의 테두리 색상입니다.window.inactiveBorder: 비활성화된 (언포커싱) 창의 테두리 색상입니다.
웰컴 페이지와 같은 텍스트 문서 내부의 색상입니다.
textBlockQuote.background: 블록 인용부호의 배경색입니다.textBlockQuote.border: 블록 인용부호의 테두리색입니다.textCodeBlock.background: 코드블록의 배경색입니다.textLink.activeForeground: 링크를 마우스로 클릭하거나, 위에 두었을때의 전경색입니다.textLink.foreground: 텍스트링크의 전경색입니다.textPreformat.foreground: 포맷이 지정된 텍스트 세그먼트의 전경색입니다.textSeparator.foreground: 텍스트 구분 기호의 색입니다.
새 창 탐색기의 Open Folder 같은 버튼 위젯을 위한 색입니다.
button.background: 버튼 배경색입니다.button.foreground: 버튼 전경색입니다.button.hoverBackground: 버튼위에 마우스를 두었을때 나타나는 배경색입니다.checkbox.background: 체크박스 위젯의 배경색입니다.checkbox.foreground: 체크박스 위젯의 전경색입니다.checkbox.border: 체크박스 위젯의 테두리색입니다.
통합 터미널 혹은 출력 패널과 같은 모든 드롭다운 위젯의 색상 세트입니다. macOS에서는 현재 지원되지 않음에 주의하십시오.
dropdown.background: 드롭다운 배경색입니다.dropdown.listBackground: 드롭다운 목록의 배경색입니다.dropdown.border: 드롭다운의 테두리색입니다.dropdown.foreground: 드롭다운의 전경색입니다.
서치 뷰 또는 Find/Replace 대화상자와 같은 입력 컨트롤의 색상입니다.
input.background: 입력상자 배경input.border: 입력상자 테두리색input.foreground: 입력상자 전경색input.placeholderForeground: 입력상자의 placeholder 전경색inputOption.activeBackground: 입력필드에서 활성화된 옵션의 배경색inputOption.activeBorder: 입력필드에서 활성화된 옵션의 테두리색inputValidation.errorBackground: 오류 심각도에 대한 유효성 검사 배경색inputValidation.errorForeground: 오류 심각도에 대한 유효성 검사 전경색inputValidation.errorBorder: 오류 심각도에 대한 유효성 검사 테두리색inputValidation.infoBackground: 정보 심각도에 대한 유효성 검사 배경색inputValidation.infoForeground: 정보 심각도에 대한 유효성 검사 전경색inputValidation.infoBorder: 정보 심각도에 대한 유효성 검사 테두리색inputValidation.warningBackground: 정보 경고를 위한 유효성 검사 배경색inputValidation.warningForeground: 경고 심각도에 대한 유효성 검사 전경색inputValidation.warningBorder: 경고 심각도에 대한 유효성 검사 테두리색
scrollbar.shadow: 뷰가 스크롤 되었음을 나타내는 스크롤 막대 슬라이더 그림자scrollbarSlider.activeBackground: 클릭시 나타나는 스크롤바 슬라이더 배경색scrollbarSlider.background: 스크롤바 슬라이더 배경색scrollbarSlider.hoverBackground: 마우스를 위에 두었을때 나타나는 스크롤바 슬라이더 배경색
뱃지는 검색 결과의 개수와 같은 작은 정보 레이블입니다.
badge.foreground: 뱃지 전경색badge.background: 뱃지 배경색
progressBar.background: 장시간 실행되는 작업의 프로그레스 바 배경색
파일 탐색이와 같은 목록과 트리를 위한 색상입니다. 활성화된 리스트/트리는 키보드 포커스를 갖고 있으며, 비활성화의 경우는 그렇지 않습니다.
list.activeSelectionBackground: 활성된 리스트/트리의 선택된 항목의 리스트/트리의 배경색list.activeSelectionForeground: 활성된 리스트/트리의 선택된 항목의 리스트/트리의 전경색list.dropBackground: 마우스로 항목을 움직일때, 리스트/트리의 배경색list.focusBackground: 리스트/트리가 활성화 되어있을때, 포커스된 항목의 리스트/트리 배경색list.focusForeground: 리스트/트리가 활성화 되어있을때, 포커스된 항목의 리스트/트리 전경색. 활성된 리스트/ 트리는 키보드 포커스를 갖고 있으며, 비활성화의 경우는 그렇지 않습니다.list.highlightForeground: 리스트/트리 내부를 검색할때 일치되는 강조의 전경색list.hoverBackground: 마우스를 아이템 위에 두었을때의 리스트/트리 배경색list.hoverForeground: 마우스를 아이템 위에 두었을때의 리스트/트리 전경색list.inactiveSelectionBackground: 리스트/트리가 비활성화 상태일때 선택된 항목의 리스트/트리 배경색list.inactiveSelectionForeground: 리스트/트리가 비활성화 상태일때 선택된 항목의 리스트/트리 전경색. 활성된 리스트/ 트리는 키보드 포커스를 갖고 있으며, 비활성화의 경우는 그렇지 않습니다.list.inactiveFocusBackground: 리스트가 비활성화 상태일때 포커스가 있는 항목의 배경색. 활성된 리스트는 키보드 포커스를 갖고 있으며, 비활성화의 경우는 그렇지 않습니다. 현재는 리스트에만 지원됩니다.list.invalidItemForeground: 유효하지 않은 항목의 리스트/트리 전경색, 예를 들면 탐색기에서 확인 할수 없는 루트가 있습니다.list.errorForeground: 에러를 포함하는 리스트 항목의 전경색list.warningForeground: 경고가 포함된 리스트 항목의 전경색listFilterWidget.background: 리스트/트리 안에서 검색할때 입력된 텍스트의 리스트/트리 필터 배경색listFilterWidget.outline: 리스트/트리 안에서 검색할때 입력된 텍스트의 리스트/트리 필터 위젯의 윤곽선색listFilterWidget.noMatchesOutline: 리스트/ 트리 내부에서 검색할때 입력된 텍스트와 일치하는 항목이 없을때 리스트/트리 필터 위젯의 윤곽선 색상.list.filterMatchBackground: 리스트와 트리에서 필터링된 일치 항목의 배경색list.filterMatchBorder: 리스트와 트리에서 필터링된 일치 항목의 테두리색tree.indentGuidesStroke: 들여쓰기 가이드를 위한 트리 위젯의 선 색상
액티비티 바는 워크 벤치의 가장 왼쪽 혹은 오른쪽에 표시되며, 사이드 바 뷰를 빠르게 이동 할 수 있게 합니다.
activityBar.background: 액티비티 바 배경색activityBar.dropBackground: 액티비티 바 항목에 대한 드래그 앤 드롭 피드백 색상activityBar.foreground: 액티비티 바 전경색 (예를 들어 아이콘에 쓰인).activityBar.inactiveForeground: 비활성화 상태에서의 액티비티 바 항목 전경색activityBar.border: 사이드 바가 있는 액티비티 바 테두리 색activityBarBadge.background: 액티비티 알림 뱃지 배경색activityBarBadge.foreground: 액티비티 알림 뱃지 전경색activityBar.activeBorder: 액티비티 바 활성 표시기 테두리 색activityBar.activeBackground: 활성화된 엘리먼트에 대한 액티비티 바 옵션 배경색activityBar.activeFocusBorder: 활성화된 항목에 대한 액티비티 바 포커스 테두리 색
사이드 바는 탐색기나 검색 같은 뷰를 포함합니다.
-
sideBar.background: 사이드 바 배경색. -
sideBar.foreground: 사이드 바 전경색. 사이드 바는 탐색기나 검색 같은 뷰를 포함합니다. -
sideBar.border: 에디터를 분리하는 쪽의 사이드 바 테두리 색. -
sideBar.dropBackground: 사이드 바 섹션에 대한 드래그 앤 드롭 피드백 색상. 이 색상은 사이드 바 섹션이 여전히 보일 수 있도록 투명해야 합니다. 사이드 바는 탐색기나 검색 같은 뷰를 포함합니다. -
sideBarTitle.foreground: 사이드 바 제목 전경색 -
sideBarSectionHeader.background: 사이드 바 섹션 헤더 배경색 -
sideBarSectionHeader.foreground: 사이드 바 섹션 세더 전경색 -
sideBarSectionHeader.border: 사이드 바 섹션 헤더 테두리 색
미니맵은 현재 파일의 최소화 된 버전을 보여줍니다.
-
minimap.findMatchHighlight: 파일에서 검색한 결과에 일치되는 강조색 -
minimap.selectionHighlight: 에디터 선택의 강조색 -
minimap.errorHighlight: 에디터 내부의 에러 강조색 -
minimap.warningHighlight: 에디터 내부의 경고 강조색 -
minimapGutter.addedBackground: 추가 된 컨텐츠를 위한 미니맵 거터 색상 -
minimapGutter.modifiedBackground: 수정 된 컨텐츠를 위한 미니맵 거터 색상 -
minimapGutter.deletedBackground: 삭제 된 컨텐츠를 위한 미니맵 거터 색상
에디터 그룹은 에디터들을 담는 컨테이너 입니다. 다수의 에디터 그룹이 존재 할 수 있습니다. 탭은 에디터를 담는 컨테이너 입니다. 한개의 에디터 그룹에서 여러개의 탭이 열릴 수 있습니다.
editorGroup.border: 에디터 그룹을 구분 짓기 위한 색상.
editorGroup.dropBackground: 에디터를 드래그 할 때의 배경색
editorGroupHeader.noTabsBackground: 탭이 비활성화 된 경우의 에디터 그룹 제목 헤더의 배경색 ("workbench.editor.showTabs": false로 설정)
editorGroupHeader.tabsBackground: 탭 컨테이너의 배경색
editorGroupHeader.tabsBorder: 탭이 활성화 되었을때의 에디터 그룹 제목 헤더의 테두리 색
editorGroup.emptyBackground: 빈 에디터 그룹의 배경색.editorGroup.focusedEmptyBorder: 포커스 된 빈 에디터 그룹의 테두리색.tab.activeBackground: 활성 그룹의 활성 탭 배경색.tab.unfocusedActiveBackground: 비활성 에디터 그룹의 활성 탭 배경색.tab.activeForeground: 활성 그룹의 활성 탭 전경색.tab.border: 탭을 구분하기 위한 테두리색.tab.activeBorder: 활성 탭의 하단 테두리 색.tab.unfocusedActiveBorder: 비활성 에디터 그룹의 활성 탭 하단 테두리 색.tab.activeBorderTop: 활성 탭의 상단 테두리 색.tab.unfocusedActiveBorderTop: 비활성 에디터 그룹의 활성 탭 상단 테두리 색.tab.inactiveBackground: 비활성 탭 배경색.tab.inactiveForeground: 활성 그룹의 비활성 탭 전경색.tab.unfocusedActiveForeground: 비활성 에디터 그룹의 활성 탭 전경색.tab.unfocusedInactiveForeground: 비활성 에디터 그룹의 비활성 탭 전경색.tab.hoverBackground: 마우스를 위로 두었을때의 탭 배경색tab.unfocusedHoverBackground: 포커스 되지 않은 그룹의 마우스를 위로 두었을때의 탭 배경색tab.hoverBorder: 마우스를 위로 두었을때의 강조되는 탭의 테두리 색tab.unfocusedHoverBorder: 포커스 되지 않은 그룹의 마우스를 위로 두었을때의 강조되는 탭의 테두리 색tab.activeModifiedBorder: 활성 그룹에서 수정된 (dirty) 활성 그룹의 활성 탭 테두리 색.tab.inactiveModifiedBorder: 활성 그룹에서 수정된 (dirty) 비활성 탭 상단의 테두리 색.tab.unfocusedActiveModifiedBorder: 포커스 되지 않은 그룹에서 수정된 (dirty) 활성 탭 상단의 테두리 색.tab.unfocusedInactiveModifiedBorder: 포커스 되지 않은 그룹에서 수정된 (dirty) 비활성 탭 상단의 테두리 색.editorPane.background: 가운데 정렬된 에디터 레이아웃의 양측에 보이는 에디터 창의 배경색.
가장 두드러진 에디터 색상은 구문 강조에 쓰이는 토큰 색상이며 설치된 언어 문법을 기반으로 작동합니다. 이 색상들은 생상 테마에 의해 정의되지만 editor.tokenColorCustomizations 설정으로 커스텀 할 수도 있습니다. 색상 테마를 업데이트 하거나 가능한 토큰 타입에 대한 자세한 내용은 색상 테마 커스터마이징을 참조하십시오.
다른 모든 에디터 색상은 아래 목록과 같습니다:
editor.background: 에디터 배경색.editor.foreground: 에디터 기본 전경색.editorLineNumber.foreground: 에디터 줄 번호 색상editorLineNumber.activeForeground: 활성 에디터 줄 번호 색상editorCursor.background: 에디터 커서의 배경색. 블록 커서로 겹친 문자의 색상을 커스터마이즈 할 수 있습니다.editorCursor.foreground: 에디터 커서의 색상.
한글자 이상의 단어를 선택할때, 선택 색상이 표시됩니다. 선택 된 부분 외에도 동일한 내용을 가진 모든 컨텐츠가 강조 표시 됩니다.
editor.selectionBackground: 에디터의 선택 색상.editor.selectionForeground: 선택된 텍스트의 고대비 색상.editor.inactiveSelectionBackground: 비활성 에디터의 선택 색상. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.editor.selectionHighlightBackground: 선택된 내용과 같은 부분의 색상. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.editor.selectionHighlightBorder: 선택된 내용과 같은 부분의 테두리 색상.
단어 강조 색상은 커서가 기호나 단어 안에 있을때 보여집니다. 파일 유형에 사용 가능한 언어 지원에 따라 일치하는 모든 참조 및 선언 부분이 강조 표시되고, 읽기와 쓰기 액세스가 다른 색상으로 표시 됩니다. 만약 문서 기호 언어 지원이 가능하지 않은 경우, 단어 강조 표시로 돌아갑니다.
editor.wordHighlightBackground: 변수를 읽는 것과 같은, 읽기 액세스중의 기호 배경색. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.editor.wordHighlightBorder: 변수를 읽는 것과 같은, 읽기 액세스중의 기호 테두리 색.editor.wordHighlightStrongBackground: 변수에 쓰는 것과 같은, 쓰기 액세스 중의 기호 배경색. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.editor.wordHighlightStrongBorder: 변수에 쓰는 것과 같은, 쓰기 액세스 중의 기호 테두리 색.
찾기 색상은 찾기/바꾸기 대화상자의 현재 찾는 문자열에 따라 다릅니다.
editor.findMatchBackground: 현재 검색과 일치하는 색상.editor.findMatchHighlightBackground: 다른 검색과 일치하는 색상. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.editor.findRangeHighlightBackground: 검색을 제한하는 범위의 색상 (찾기 위젯에서 'Find in Selection'을 사용). 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.editor.findMatchBorder: 현재 검색과 일치하는 테두리 색.editor.findMatchHighlightBorder: 다른 검색과 일치하는 테두리 색.editor.findRangeHighlightBorder: 검색을 제한하는 범위의 테두리 색 (찾기 위젯에서 'Find in Selection'을 사용). 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.
검색 에디터 색상은 검색 에디터에서 결과를 강조합니다. 이는 동일한 에디터에서 다른 일치하는 클래스를 더 잘 구분하기 위해 다른 찾기에 대한 일치와 별도로 설정 할 수 있습니다.
searchEditor.findMatchBackground: 에디터의 결과 색.searchEditor.findMatchBorder: 에디터의 결과의 테두리 색.
말풍선 강조 표시는, 말풍선이 표시되는 기호 뒤에 표시됩니다.
editor.hoverHighlightBackground: 말풍선이 표시되는 단어 아래에 강조되는 색상. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.
현재 줄은 일반적으로 배경 강조 혹은 테두리로 나타납니다. (둘다는 아님)
editor.lineHighlightBackground: 커서 위치에서 강조되는 라인의 배경색.editor.lineHighlightBorder: 커서 위치에서 선 주위의 테두리에 대한 배경색.
링크 색상은 링크를 클릭 할 때 보여집니다.
editorLink.activeForeground: 활성 링크의 색.
검색 결과를 선택 할때 범위 강조표시가 나타납니다.
editor.rangeHighlightBackground: 강조된 범위의 배경색, 빠른 열기, 파일에서 심볼 검색, 찾기 기능에서 사용됩니다. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.editor.rangeHighlightBorder: 강조된 범위 주변의 테두리 배경색.
Go to Definition과 같은 커맨드를 통해 심볼을 탐색할때 강조가 표시 됩니다.
editor.symbolHighlightBackground: 강조된 심볼의 배경색. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.editor.symbolHighlightBorder: 강조된 심볼 주변의 테두리 배경색.
에디터의 공백을 확인하기 위해, Toggle Render Whitespace를 사용하십시오.
editorWhitespace.foreground: 에디터의 공백 문자 색상.
에디터의 들여쓰기 가이드를 보기 위해, "editor.renderIndentGuides": true로 설정하십시오.
editorIndentGuide.background: 에디터 들여쓰기 가이드의 색상.editorIndentGuide.activeBackground: 활성 에디터 들여쓰기 가이드의 색상.
에디터의 눈금을 보기 위해, "editor.rulers"를 통해 위치를 정의하십시오.
editorRuler.foreground: 에디터 눈금의 색상.
CodeLens:
editorCodeLens.foreground: 에디터 CodeLens의 전경색.
Lightbulb:
editorLightBulb.foreground: Lightbulb 액션 아이콘의 색상.editorLightBulbAutoFix.foreground: Lightbulb 자동 기능 액션 아이콘의 색상.
괄호 일치:
editorBracketMatch.background: 일치하는 대괄호 뒤의 배경색.editorBracketMatch.border: 일치하는 대괄호 상자의 색상.
개요 눈금:
이 눈금은 에디터의 우측 가장자리에 있는 스크롤 막대 아래에 있으며, 에디터의 장식에 대한 개요을 제공합니다.
editorOverviewRuler.border: 개요 눈금의 테두리 색.editorOverviewRuler.findMatchForeground: 검색 일치에 대한 개요 눈금 마커 색상. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.-editorOverviewRuler.rangeHighlightForeground: 빠른 열기, 파일의 심볼, 찾기 기능과 같이 강조된 범위의 개요 눈금 마커 색상. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.editorOverviewRuler.selectionHighlightForeground: 선택 강조를 위한 개요 눈금 마커 색상. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.editorOverviewRuler.wordHighlightForeground: 심볼 강조를 위한 개요 눈금 마커 색상. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.editorOverviewRuler.wordHighlightStrongForeground: 쓰기 액세스 중의 심볼 강조를 위한 개요 눈금 마커 색상. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.editorOverviewRuler.modifiedForeground: 수정 된 내용을 위한 개요 눈금 마커 색상.editorOverviewRuler.addedForeground: 추가 된 내용을 위한 개요 눈금 마커 색상.editorOverviewRuler.deletedForeground: 삭제 된 내용을 위한 개요 눈금 마커 색상.editorOverviewRuler.errorForeground: 에러를 위한 개요 눈금 마커 색상.editorOverviewRuler.warningForeground: 경고를 위한 개요 눈금 마커 색상.editorOverviewRuler.infoForeground: 정보를 위한 개요 눈금 마커 색상.editorOverviewRuler.bracketMatchForeground: 일치하는 대괄호를 위한 개요 눈금 마커 색상.
에러 및 경고:
editorError.foreground: 에디터의 에러 전경색.editorError.border: 에디터에서 에러 박스의 테두리 색상.editorWarning.foreground: 에디터에서 경고 전경색.editorWarning.border: 에디터에서 경고 박스의 테두리 색상.editorInfo.foreground: 에디터의 정보 전경색.editorInfo.border: 에디터에서 정보 박스의 테두리 색상.editorHint.foreground: 에디터의 힌트 전경색.editorHint.border: 에디터에서 힌트 박스의 테두리 색상.problemsErrorIcon.foreground: 문제 에러 아이콘에 쓰이는 색상.problemsWarningIcon.foreground: 문제 경고 아이콘에 쓰이는 색상.problemsInfoIcon.foreground: 문제 정보 아이콘에 쓰이는 색상.
미사용 소스 코드:
editorUnnecessaryCode.border: 에디터에 불필요한(안쓰인) 소스코드의 테두리 색상.editorUnnecessaryCode.opacity: 에디터에 불필요한(안쓰인) 소스코드의 투명도. 예를 들어,"#000000c0"는 75%의 투명도를 렌더링 할 것입니다. 고 대비 테마의 경우,"editorUnnecessaryCode.border"테마 색상을 사용하여 불필요한 코드를 페이드 아웃하는 대신 밑줄을 칩니다.
글리프 여백과 줄번호를 포함하는 거터:
editorGutter.background: 에디터 거터의 배경색. 거터에는 글리프 여백과 줄번호를 포함합니다.editorGutter.modifiedBackground: 수정 된 줄의 에디터 거터의 배경색.editorGutter.addedBackground: 추가 된 줄의 에디터 거터의 배경색.editorGutter.deletedBackground: 삭제 된 줄의 에디터 거터의 배경색.editorGutter.commentRangeForeground: 주석 범위의 에디터 거터 장식 색상.
삽입 혹은 삭제된 텍스트 색상을 위해, 배경이나 테두리 색 중에서 한가지를 사용하십시오.
diffEditor.insertedTextBackground: 삽입된 텍스트의 배경색. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.diffEditor.insertedTextBorder: 삽입된 텍스트의 테두리 색상.diffEditor.removedTextBackground: 삭제된 텍스트의 배경색. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.diffEditor.removedTextBorder: 삭제된 텍스트의 테두리 색상.diffEditor.border: 2개의 텍스트 에디터 간의 테두리 색상.
에디터 위젯은 에디터 컨텐츠 앞에 보입니다. 예시로는 검색/바꾸기 대화상자, 제안 위젯 그리고 에디터 말풍선이 있습니다.
editorWidget.foreground: 검색/바꾸기 같은 에디터 위젯의 전경색.editorWidget.background: 검색/바꾸기 같은 에디터 위젯의 배경색.editorWidget.border: 에디터 위젯의 테두리 색, 이는 자체 테두리 색을 포함하지 않는 경우 작동합니다.editorWidget.resizeBorder: 에디터 위젯의 리사이즈 바 테두리 색. 이 색상은 위젯이 리사이즈를 선택하고 위젯에 의해 색상이 덮어쓰기 되지 않는 경우에 쓰입니다.
editorSuggestWidget.background: 제안 위젯의 배경색.editorSuggestWidget.border: 제안 위젯의 테두리색.editorSuggestWidget.foreground: 제안 위젯의 전경색.editorSuggestWidget.highlightForeground: 제안 위젯에서 일치 하는 내용에 대한 강조색.editorSuggestWidget.selectedBackground: 제안 위젯에서 선택된 항목에 대한 배경색.
editorHoverWidget.foreground: 에디터 말풍선의 전경색.editorHoverWidget.background: 에디터 말풍선의 배경색.editorHoverWidget.border: 에디터 말풍선의 테두리색.editorHoverWidget.statusBarBackground: 에디터 말풍선 상태 표시줄의 배경색.
디버그 익셉션 위젯은 디버그가 익셉션에서 중지 될 때 에디터에 표시되는 픽 뷰 입니다.
debugExceptionWidget.background: 익셉션 위젯의 배경색.debugExceptionWidget.border: 익셉션 위젯의 테두리색.
에디터 마커 뷰는 에디터에서 경고나 에러를 탐색할때 나타납니다. (Go to Next Error or Warning 커맨드 사용)
editorMarkerNavigation.background: 에디터 마커 탐색 위젯의 배경 색상.editorMarkerNavigationError.background: 에디터 마커 탐색 위젯의 에러 색상.editorMarkerNavigationWarning.background: 에디터 마커 탐색 위젯의 경고 색상.editorMarkerNavigationInfo.background: 에디터 마커 탐색 위젯의 정보 색상.
픽뷰는 에디터 내부에서 참조나 선언을 뷰 형태로 보여줍니다.
peekView.border: 픽 뷰 테두리와 화살표의 색상.peekViewEditor.background: 픽 뷰 에디터의 배경색.peekViewEditorGutter.background: 픽 뷰 에디터의 거터 배경색.peekViewEditor.matchHighlightBackground: 픽 뷰 에디터의 일치되는 부분에 대한 강조색.peekViewEditor.matchHighlightBorder: 픽 뷰 에디터의 일치되는 부분에 대한 강조 테두리색.peekViewResult.background: 픽 뷰 결과 목록의 배경색.peekViewResult.fileForeground: 픽 뷰 결과 목록의 파일 노드의 전경색.peekViewResult.lineForeground: 픽 뷰 결과 목록의 라인 노드의 전경색.peekViewResult.matchHighlightBackground: 픽 뷰 결과 목록의 일치되는 부분에 대한 강조색.peekViewResult.selectionBackground: 픽 뷰 결과 목록의 선택된 항목에 대한 배경색.peekViewResult.selectionForeground: 픽 뷰 결과 목록의 선택된 항목에 대한 전경색.peekViewTitle.background: 픽 뷰 제목 부분의 배경색.peekViewTitleDescription.foreground: 픽 뷰 제목 정보의 색상.peekViewTitleLabel.foreground: 픽 뷰 제목의 색상.
병합 충돌 장식은 에디터가 특별한 diff 범위를 포함하고 있을때 나타납니다.
merge.currentHeaderBackground: 인라인 병합 충돌의 현재 헤더 배경색. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.merge.currentContentBackground: 인라인 병합 충돌의 현재 내용 배경색. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.merge.incomingHeaderBackground: 인라인 병합 충돌의 이후 헤더 배경색.뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.merge.incomingContentBackground: 인라인 병합 충돌의 이후 내용 배경색. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.merge.border: 인라인 병합 충돌의 헤더와 스플리터의 테두리색.merge.commonContentBackground: 인라인 병합 충돌의 공통 이전 내용의 배경색. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.merge.commonHeaderBackground: 인라인 병합 충돌의 공통 이전 헤더의 배경색. 뒤의 내용을 숨기지 않기 위해 불투명해서는 안됩니다.editorOverviewRuler.currentContentForeground: 인라인 병합 충돌의 현재 개요 눈금 전경색.editorOverviewRuler.incomingContentForeground: 인라인 병합 충돌의 이후 개요 눈금 전경색.editorOverviewRuler.commonContentForeground: 인라인 병합 충돌의 현재 공통 이전 내용의 개요 눈금 전경색.
패널은 에디터 영역 아래에서 보이며, 출력이나 통합 터미널 같은 뷰를 포함합니다.
panel.background: 패널 배경색panel.border: 에디터와 구분하기 위한 패널의 테두리색.panel.dropBackground: 패널 제목 항목을 위한 드래그 앤 드롭 피드백 색상. 이 색상은 패널 항목이 비춰보일 수 있도록 투명해야 합니다.panelTitle.activeBorder: 활성 패널 제목을 위한 테두리색.panelTitle.activeForeground: 활성 패널을 위한 제목 색.panelTitle.inactiveForeground: 비활성화 패널을 위한 제목 색.panelInput.border: 패널의 입력을 위한 입력상자 테두리 색.
imagePreview.border: 이미지 미리보기의 이미지 테두리 색상.
상태 표시줄은 작업벤치 하단에 나타납니다.
statusBar.background: 표준 상태 표시줄 배경색상.statusBar.foreground: 상태 표시줄 전경색상.statusBar.border: 상태 표시줄과 에디터를 구분짓는 상태 표시줄 테두리 색상.statusBar.debuggingBackground: 프로그램이 디버깅 중일때의 상태 표시줄 배경색상.statusBar.debuggingForeground: 프로그램이 디버깅 중일때의 상태 표시줄 전경색상.statusBar.debuggingBorder: 프로그램이 디버깅 중일때의 상태 표시줄과 에디터를 구분 짓는 상태 표시줄 테두리 색상.statusBar.noFolderForeground: 열린 폴더가 없을때의 상태 표시줄 전경색상.statusBar.noFolderBackground: 열린 폴더가 없을때의 상태 표시줄 배경색상.statusBar.noFolderBorder: 열린 폴더가 없을때의 상태 표시줄과 에디터를 구분 짓는 상태 표시줄 테두리 색상.statusBarItem.activeBackground: 클릭 중일때의 상태 표시줄 항목 배경색상.statusBarItem.hoverBackground: 마우스를 위에 두었을때의 상태 표시줄 항목 배경색상.statusBarItem.prominentForeground: 상태 표시줄의 눈에 잘 띄는 항목 전경색상.statusBarItem.prominentBackground: 상태 표시줄의 눈에 잘 띄는 항목 배경색상.statusBarItem.prominentHoverBackground: 마우스를 위에 두었을때의 상태 표시줄의 눈에 잘 띄는 항목 배경색상.statusBarItem.remoteBackground: 상태 표시줄의 원격 표시기의 배경색상.statusBarItem.remoteForeground: 상태 표시줄의 원격 표시기의 전경색상.
중요한 항목은 다른 상태 표시줄 항목과 차별화 되어 중요함을 나타냅니다. 한가지 예시로 Toggle Tab Key Moves Focus 커맨드 변경 모드 표시기 입니다.
titleBar.activeBackground: 창이 활성화 되었을때의 제목 표시줄 배경색상.titleBar.activeForeground: 창이 활성화 되었을때의 제목 표시줄 전경색상.titleBar.inactiveBackground: 창이 비활성화 되었을때의 제목 표시줄 배경색상.titleBar.inactiveForeground: 창이 활성화 되었을때의 제목 표시줄 전경색상.titleBar.border: 제목 표시줄 테두리 색상.
menubar.selectionForeground: 메뉴 표시줄에서 선택된 메뉴의 전경색상.menubar.selectionBackground: 메뉴 표시줄에서 선택된 메뉴의 배경색상.menubar.selectionBorder: 메뉴 표시줄에서 선택된 메뉴의 테두리 색상.menu.foreground: 메뉴 항목의 전경색상.menu.background: 메뉴 항목의 배경색상.menu.selectionForeground: 메뉴에서 선택된 메뉴 항목의 전경색상.menu.selectionBackground: 메뉴에서 선택된 메뉴 항목의 배경색상.menu.selectionBorder: 메뉴에서 선택된 메뉴 항목의 테두리색상.menu.separatorBackground: 메뉴에서 메뉴 항목을 구분짓는 색상.menu.border: 메뉴의 테두리 색상.
주의: 아래의 색상은 VS Code 버전 1.21 이상에서만 적용됩니다.
알림은 작업공간의 우측 하단에서 위로 올라오며 나타납니다.
한번 알림 센터에서 열린 이후에는, 헤더를 포함한 목록으로 표시됩니다:
notificationCenter.border: 알림 센터의 테두리 색상.notificationCenterHeader.foreground: 알림 센터 헤더의 전경색상.notificationCenterHeader.background: 알림 센터 헤더의 배경색상.notificationToast.border: 알림 토스트의 테두리 색상.notifications.foreground: 알림의 전경색상.notifications.background: 알림의 배경색상.notifications.border: 알림 센터에서 다른 알림과 구분 짓는 알림의 테두리 색상.notificationLink.foreground: 알림 링크의 전경색상.notificationsErrorIcon.foreground: 알림 에러 아이콘의 색상.notificationsWarningIcon.foreground: 알림 경고 아이콘의 색상.notificationsInfoIcon.foreground: 알림 정보 아이콘의 색상.
만약 VS Code가 1.21 (2018 2월) 릴리즈 이전 버전이라면, 아래는 이전의 색상입니다 (현재 지원하지 않음):
notification.backgroundnotification.foregroundnotification.buttonBackgroundnotification.buttonForegroundnotification.buttonHoverBackgroundnotification.errorBackgroundnotification.errorForegroundnotification.infoBackgroundnotification.infoForegroundnotification.warningBackgroundnotification.warningForeground
extensionButton.prominentForeground: 익스텐션 뷰 버튼의 전경색상. (예를 들어 Install 버튼)extensionButton.prominentBackground: 익스텐션 뷰 버튼의 배경색상.extensionButton.prominentHoverBackground: 익스텐션 뷰 버튼의 말풍선 배경색상.extensionBadge.remoteBackground: 익스텐션 뷰의 원격 뱃지 배경색상.extensionBadge.remoteForeground: 익스텐션 뷰의 원격 뱃지 전경색상.
pickerGroup.border: 빠른 선택 (빠른 열기)의 그룹 테두리 색상.pickerGroup.foreground: 빠른 선택 (빠른 열기)의 그룹 레이블 색상.quickInput.background: 빠른 입력 배경색상. 빠른 입력 위젯은 색상 테마 선택자 같은 뷰를 담는 컨테이너 입니다.quickInput.foreground: 빠른 입력 전경색상. 빠른 입력 위젯은 색상 테마 선택자 같은 뷰를 담는 컨테이너 입니다.
terminal.background: 통합 터미널의 뷰포트 배경색상.terminal.border: 터미널 내에서 분할 창을 구분하는 테두리의 색상. 기본값은 panel.border 입니다.terminal.foreground: 통합 터미널의 기본 전경색상.terminal.ansiBlack: 터미널의 'Black' ANSI 색상.terminal.ansiBlue: 터미널의 'Blue' ANSI 색상.terminal.ansiBrightBlack: 터미널의 'BrightBlack' ANSI 색상.terminal.ansiBrightBlue: 터미널의 'BrightBlue' ANSI 색상.terminal.ansiBrightCyan: 터미널의 'BrightCyan' ANSI 색상.terminal.ansiBrightGreen: 터미널의 'BrightGreen' ANSI 색상.terminal.ansiBrightMagenta: 터미널의 'BrightMagenta' ANSI 색상.terminal.ansiBrightRed: 터미널의 'BrightRed' ANSI 색상.terminal.ansiBrightWhite: 터미널의 'BrightWhite' 색상.terminal.ansiBrightYellow: 터미널의 'BrightYellow' ANSI 색상.terminal.ansiCyan: 터미널의 'Cyan' ANSI 색상.terminal.ansiGreen: 터미널의 'Green' ANSI 색상.terminal.ansiMagenta: 터미널의 'Magenta' ANSI 색상.terminal.ansiRed: 터미널의 'Red' ANSI 색상.terminal.ansiWhite: 터미널의 'White' ANSI 색상.terminal.ansiYellow: 터미널의 'Yellow' ANSI 색상.terminal.selectionBackground: 터미널의 선택 배경색상.terminalCursor.background: 터미널 커서의 배경색상. 블록 커서를 통해 커스터마이즈 할 수 있습니다.terminalCursor.foreground: 터미널 커서의 전경색상.
debugToolBar.background: 디버그 툴바 배경색상.debugToolBar.border: 디버그 툴바 테두리색상.editor.stackFrameHighlightBackground: 에디터의 상단 스택 프레임 강조의 배경색.editor.focusedStackFrameHighlightBackground: 에디터의 포커스 된 스택 프레임 강조의 배경색.
welcomePage.background: 시작 페이지의 배경색상.welcomePage.buttonBackground: 시작페이지 버튼의 배경색상.welcomePage.buttonHoverBackground: 시작페이지 버튼의 말풍선 배경 색상.walkThrough.embeddedEditorBackground: Interactive Playground에 임베드 된 에디터의 배경색상.
gitDecoration.addedResourceForeground: 추가 된 깃 리소스의 색상.파일 레이블과 SCM 뷰릿에 사용됩니다.gitDecoration.modifiedResourceForeground: 수정 된 깃 리소스의 색상.파일 레이블과 SCM 뷰릿에 사용됩니다.gitDecoration.deletedResourceForeground: 삭제 된 깃 리소스의 색상.파일 레이블과 SCM 뷰릿에 사용됩니다.gitDecoration.untrackedResourceForeground: 추적되지 않은 깃 리소스의 색상.파일 레이블과 SCM 뷰릿에 사용됩니다.gitDecoration.ignoredResourceForeground: 무시된 깃 리소스의 색상.파일 레이블과 SCM 뷰릿에 사용됩니다.gitDecoration.conflictingResourceForeground: 충돌하는 깃 리소스의 색상.파일 레이블과 SCM 뷰릿에 사용됩니다.gitDecoration.submoduleResourceForeground: 하위 모듈 리소스의 색상.
주의: 이 색상들은 GUI 설정 에디터용이며, Preferences: Open Settings (UI) 커맨드를 통해 열 수 있습니다.
settings.headerForeground: 활성 제목이나 섹션 헤더를 위한 전경색상.settings.modifiedItemIndicator: 수정된 설정을 나타내는 줄의 색상.settings.dropdownBackground: 드롭다운 배경색상.settings.dropdownForeground: 드롭다운 전경색상.settings.dropdownBorder: 드롭다운 테두리 색상.settings.dropdownListBorder: 드롭다운 목록의 테두리 색상.settings.checkboxBackground: 체크박스 배경색상.settings.checkboxForeground: 체크박스 전경색상.settings.checkboxBorder: 체크박스 테두리색상.settings.textInputBackground: 텍스트 입력 상자 배경색상.settings.textInputForeground: 텍스트 입력 상자 전경색상.settings.textInputBorder: 텍스트 입력 상자 테두리색상.settings.numberInputBackground: 숫자 입력 상자 배경색상.settings.numberInputForeground: 숫자 입력 상자 전경색상.settings.numberInputBorder: 숫자 입력 상자 테두리색상.
브레드크럼 탐색을 위한 테마색상입니다:
breadcrumb.foreground: 브레드크럼 항목의 색상.breadcrumb.background: 브레드크럼 항목의 배경색상.breadcrumb.focusForeground: 포커스된 브레드크럼 항목의 색상.breadcrumb.activeSelectionForeground: 선택된 브레드크럼 항목의 색상.breadcrumbPicker.background: 브레드크럼 항목 선택기의 배경색상.
스니펫을 위한 테마 색상입니다:
editor.snippetTabstopHighlightBackground: 스니펫 탭스톱의 강조 배경색상.editor.snippetTabstopHighlightBorder: 스니펫 탭스톱의 강조 테두리 색상.editor.snippetFinalTabstopHighlightBackground: 마지막 스니펫 탭스톱의 강조 배경색상.editor.snippetFinalTabstopHighlightBorder: 마지막 스니펫 탭스톱의 강조 테두리 색상.
아웃라인 뷰, 브레드크럼 탐색 그리고 제안 위젯에서 나타나는 심볼 아이콘을 위한 테마 색상입니다:
symbolIcon.arrayForeground: 배열 심볼의 전경색상.symbolIcon.booleanForeground: 불리안 심볼의 전경색상.symbolIcon.classForeground: 클래스 심볼의 전경색상.symbolIcon.colorForeground: 색상 심볼의 전경색상.symbolIcon.constantForeground: 상수 심볼의 전경색상.symbolIcon.constructorForeground: 생성자 심볼의 전경색상.symbolIcon.enumeratorForeground: 열거자 심볼의 전경색상.symbolIcon.enumeratorMemberForeground: 열거자 구성원 심볼의 전경색상.symbolIcon.eventForeground: 이벤트 심볼의 전경색상.symbolIcon.fieldForeground: 필드 심볼의 전경색상.symbolIcon.fileForeground: 파일 심볼의 전경색상.symbolIcon.folderForeground: 폴더 심볼의 전경색상.symbolIcon.functionForeground: 함수 심볼의 전경색상.symbolIcon.interfaceForeground: 인터페이스 심볼의 전경색상.symbolIcon.keyForeground: 키 심볼의 전경색상.symbolIcon.keywordForeground: 키워드 심볼의 전경색상.symbolIcon.methodForeground: 메소드 심볼의 전경색상.symbolIcon.moduleForeground: 모듈 심볼의 전경색상.symbolIcon.namespaceForeground: 네임스페이스 심볼의 전경색상.symbolIcon.nullForeground: null 심볼의 전경색상.symbolIcon.numberForeground: 숫자 심볼의 전경색상.symbolIcon.objectForeground: 오브젝트 심볼의 전경색상.symbolIcon.operatorForeground: 연산자 심볼의 전경색상.symbolIcon.packageForeground: 패키지 심볼의 전경색상.symbolIcon.propertyForeground: 속성 심볼의 전경색상.symbolIcon.referenceForeground: 참조 심볼의 전경색상.symbolIcon.snippetForeground: 스니펫 심볼의 전경색상.symbolIcon.stringForeground: 문자열 심볼의 전경색상.symbolIcon.structForeground: 구조체 심볼의 전경색상.symbolIcon.textForeground: 텍스트 심볼의 전경색상.symbolIcon.typeParameterForeground: 타입 매개변수 심볼의 전경색상.symbolIcon.unitForeground: 단위 심볼의 전경색상.symbolIcon.variableForeground: 변수 심볼의 전경색상.
debugIcon.breakpointForeground: 중지점 아이콘 색상.debugIcon.breakpointDisabledForeground: 비활성된 중지점 아이콘 색상.debugIcon.breakpointUnverifiedForeground: 미검증된 중지점 아이콘 색상.debugIcon.breakpointCurrentStackframeForeground: 현재 중지점 스택 프레임 아이콘 색상.debugIcon.breakpointStackframeForeground: 모든 중지점 스택 프레임 아이콘 색상.debugIcon.startForeground: 디버그 툴바의 디버깅 시작 아이콘 색상.debugIcon.pauseForeground: 디버그 툴바의 일시중지 아이콘 색상.debugIcon.stopForeground: 디버그 툴바의 정지 아이콘 색상.debugIcon.disconnectForeground: 디버그 툴바의 연결해제 아이콘 색상.debugIcon.restartForeground: 디버그 툴바의 재시작 아이콘 색상.debugIcon.stepOverForeground: 디버그 툴바의 단계 진행 아이콘 색상.debugIcon.stepIntoForeground: 디버그 툴바의 단계로 이동 아이콘 색상.debugIcon.stepOutForeground: 디버그 툴바의 건너뛰기 아이콘 색상.debugIcon.continueForeground: 디버그 툴바의 이어하기 아이콘 색상.debugIcon.stepBackForeground: 디버그 툴바의 단계 취소 아이콘 색상.
색상 id는 색상 기여 포인트를 통해 익스텐션을 통해 제공 될 수도 있습니다. 이 색상들은 workbench.colorCustomizations 설정 및 색상 테마 정의 파일에서 코드 완성을 사용 할때도 나타납니다. 사용자는 익스텐션 기여탭에서 익스텐션이 정의한 색상을 확인 할 수 있습니다.