공부를 하기 전에 책상을 치워야 하는 것처럼, VSCode에서는 반드시 테마를 적용해야 합니다.
그렇지 않으면 집중력이 흐려지기 때문이에요.
하지만 사실 내 마음에 드는 테마는 찾기가 쉽지 않은데, 직접 테마를 만들 수가 있습니다.
그것도 아주 쉽게요. 걍 따라하셈 3분컷 ㄱㄱ
1. 검색창 열어서 Setting.json 파일 열기
1) VSCode를 실행 후, Ctrl + Shift + p 를 눌러 검색창(?)을 실행합니다.
* 아래와 같은 모달창이 열리면 됩니다.
2) setting.json 검색 후 클릭해서 열어준다.
* Preference: Open User Settings(JSON)으로 열어야 합니다. Workspace 아닙니다.
2. workbench.colorCustomizations 사용하여 설정 추가
workbench.colorCustomizations는 이름 그대로 사용자가 직접 편집기 및 워크벤치의
UI요소 색상을 지정하도록 해주는 설정 항목 정도만 알고 계시면 됩니다.
만약 내가 마켓 플레이스에서 Apple이라는 이름의 테마를 설치하고
다크 설정으로 설정했다고 가정해 봅시다.
그럼 여러분이 모르는 새에 VSCode는 Setting.json 파일에 아래처럼 입력이 되어있는 겁니다.
{
// 편집기의 색상 테마를 Apple이라는 이름의 다크 테마로 설정합니다.
"workbench.colorTheme": "Apple Dark"
}근데 우리는 테마를 설치 하지 않고 직접 커스터마이징을 하고 싶은 상황입니다.
어려운 거 없고 그냥 Setting.json 파일 안에 아래와 같이 입력하면 됩니다.
1) workbench.colorCustomizations 입력
{
workbench.colorCustomizations {
}
}그냥 이렇게 입력하면 사전 설정은 끝난 겁니다. 쉽죠?
이제 아래처럼 workbench.colorCustomizations에 항목 추가해 봅시다.
{
workbench.colorCustomizations {
// 편집기 배경 색상
"editor.background": "#1E1E1E", // 어두운 배경색
// 편집기 텍스트 색상
"editor.foreground": "#D4D4D4", // 기본 텍스트 색상
}
}
그럼 이제 Vscode 배경색상과 기본 텍스트 색상이 적용되는 겁니다. 쉽죠?
3. 테마 변경 속성 종류
1) 이론 정리
지금까지의 과정을 쉽게 정리하자면 그냥 workbench.colorCustmizations에
속성 항목을 추가하고 색상을 변경하면 끝입니다. #fff000 이런식으로요.
테마 속성 종류는 생각보다 다양한데, 거두절미하고 종류별로 적어보겠습니다.
{
"workbench.colorCustomizations": {
// 편집기 배경 색상
"editor.background": "#1E1E1E", // 어두운 배경색
// "editor.background": "#FFFFFF", // 밝은 배경색
// 편집기 텍스트 색상
"editor.foreground": "#D4D4D4", // 기본 텍스트 색상
// "editor.foreground": "#000000", // 어두운 텍스트 색상
// 선택된 텍스트 배경 색상
"editor.selectionBackground": "#264F78",
// 현재 줄 강조 색상
"editor.lineHighlightBackground": "#2A2A2A",
// 현재 줄 테두리 색상
"editor.lineHighlightBorder": "#282828",
// 선택 영역의 테두리 색상
"editor.selectionHighlightBorder": "#ADD6FF",
// 찾기 일치 항목 색상
"editor.findMatchBackground": "#515C6A",
"editor.findMatchHighlightBackground": "#EA5C0055",
// 검색 결과의 배경 색상
"editor.findRangeHighlightBackground": "#3A3D4166",
// 현재 검색 결과 색상
"editor.findMatchHighlightBorder": "#F39C12",
// 브래킷 일치 배경 색상
"editorBracketMatch.background": "#515C6A",
// 브래킷 일치 테두리 색상
"editorBracketMatch.border": "#C0C0C0",
// 커서 색상
"editorCursor.foreground": "#AEAFAD",
// 주석 색상
"editorGutter.commentRangeForeground": "#626262",
// 줄 번호 색상
"editorLineNumber.foreground": "#858585",
// 에러 밑줄 색상
"editorError.foreground": "#FF5370",
"editorError.border": "#E0E0E0",
// 경고 밑줄 색상
"editorWarning.foreground": "#FFCB6B",
"editorWarning.border": "#E0E0E0",
// 정보 밑줄 색상
"editorInfo.foreground": "#82AAFF",
"editorInfo.border": "#E0E0E0",
// 지시자 가리키기 배경 색상
"editorHoverWidget.background": "#252526",
"editorHoverWidget.border": "#454545",
// 상태 표시줄 배경 색상
"statusBar.background": "#007ACC",
"statusBar.foreground": "#FFFFFF",
"statusBar.noFolderBackground": "#68217A",
"statusBar.debuggingBackground": "#CC6633",
// 사이드바 배경 색상
"sideBar.background": "#252526",
"sideBar.foreground": "#D4D4D4",
"sideBarSectionHeader.background": "#007ACC",
// 활동 표시줄 배경 색상
"activityBar.background": "#333333",
"activityBar.foreground": "#FFFFFF",
"activityBarBadge.background": "#007ACC",
"activityBarBadge.foreground": "#FFFFFF",
// 배너 배경 색상
"banner.background": "#E51400",
"banner.foreground": "#FFFFFF",
"banner.iconForeground": "#FFFFFF",
// 터미널 배경 색상
"terminal.background": "#1E1E1E",
"terminal.foreground": "#CCCCCC",
"terminalCursor.background": "#FFFFFF",
"terminalCursor.foreground": "#FFFFFF",
// 터미널 ANSI 색상
"terminal.ansiBlack": "#000000",
"terminal.ansiRed": "#FF0000",
"terminal.ansiGreen": "#00FF00",
"terminal.ansiYellow": "#FFFF00",
"terminal.ansiBlue": "#0000FF",
"terminal.ansiMagenta": "#FF00FF",
"terminal.ansiCyan": "#00FFFF",
"terminal.ansiWhite": "#FFFFFF",
"terminal.ansiBrightBlack": "#808080",
"terminal.ansiBrightRed": "#FF6666",
"terminal.ansiBrightGreen": "#66FF66",
"terminal.ansiBrightYellow": "#FFFF66",
"terminal.ansiBrightBlue": "#6666FF",
"terminal.ansiBrightMagenta": "#FF66FF",
"terminal.ansiBrightCyan": "#66FFFF",
"terminal.ansiBrightWhite": "#FFFFFF"
}
}4. 확장팩으로 빌드하는 것 아닙니다.
너무 이쁜 테마를 만들었다고 신나서 지인 개발자에게 설치해 보라고 하고 싶어도 어쩔 수 없습니다.
이건 사용자 설정 코드이기 때문에, 마켓 플레이스에 빌드해서 올리는 것과는 다른 개념입니다.
만약 공유하고 싶다면 "Setting.json 파일 열고 붙여 넣기 해" 라고 알려주시면 될 것 같습니다.
