VSCode를 내 색으로 물들이기 — Terracotta Light 테마 만들기
VSCode를 내 색으로 물들이기 — Terracotta Light 테마 만들기
Claude Code와 함께 VSCode 커스텀 라이트 테마를 만들었다. 이름은 Terracotta Light. 따뜻한 테라코타 톤으로 UI 전체를 통일한 테마인데, 생각보다 간단하게 만들 수 있었다.
왜 만들었나
VSCode 기본 테마들은 대부분 차갑거나 무채색이다. 다크 테마는 많은데, 눈이 편한 라이트 테마 중에서 따뜻한 톤을 가진 건 드물다. 평소에 ayu-light를 쓰고 있었는데, UI 프레임(사이드바, 상태바 같은 부분)은 여전히 차가운 느낌이어서 직접 커스텀하기로 했다.
핵심 아이디어
VSCode 테마는 두 층으로 나뉜다.
첫 번째는 베이스 테마다. 코드 문법 하이라이팅(변수, 함수, 키워드 색상)을 담당한다. 이건 ayu-light의 것을 그대로 썼다. 이미 잘 만들어진 걸 굳이 건드릴 필요가 없으니까.
두 번째는 colorCustomizations다. VSCode의 UI 프레임 — 에디터 배경, 사이드바, 탭바, 상태바, 버튼 같은 것들의 색상을 덮어씌우는 설정이다. 이 부분만 테라코타 톤으로 바꿨다. settings.json의 workbench.colorCustomizations에 넣으면 베이스 테마보다 우선 적용된다.
컬러 팔레트
색상은 총 8가지로 정리했다. 자연물에서 영감을 받은 이름을 붙였다.
Pampas #F4F3EE — 메인 배경색. 순수 흰색(#FFFFFF) 대신 아주 연한 미색을 썼다. 에디터, 사이드바, 패널, 터미널까지 전체를 이 색으로 통일했다. 오래 봐도 눈이 편하다.
Warm Beige #E8E6DF — 호버 상태나 카드 배경에 쓰는 색. Pampas보다 살짝 진해서 미세하게 구분이 되는 정도다.
Sand #E2E0D8 — 테두리와 구분선. 은은하게 영역을 나눠주는 역할이다.
Cloudy #B1ADA1 — 비활성 텍스트, 줄번호, 스크롤바 같은 보조 요소에 쓴다.
Muted #6B6B6B — 비활성 탭이나 브레드크럼처럼 배경에 살짝 물러나 있는 텍스트용.
Text #1A1A1A — 본문 텍스트. 완전한 검정(#000000)이 아니라 아주 살짝 부드러운 톤이다.
Crail #C15F3C — 이 테마의 주인공. 테라코타 색상이다. 상태바 배경, 버튼, 커서, 배지, 활성 줄번호 등 포인트가 필요한 곳에 쓴다. 전체가 차분한 톤이니까 이 색 하나만으로도 시선이 확 간다.
Crail Dark #A84E30 — Crail의 호버 버전. 버튼에 마우스를 올렸을 때 살짝 어두워지는 정도.
적용 범위
상태바가 테라코타색으로 바뀌는 게 가장 먼저 눈에 띈다. 그 외에 에디터 커서, 활성 줄번호, 탭 상단 보더, 배지, 포커스 보더 같은 곳에서 Crail 색상이 은은하게 나타난다. Diff 에디터에서도 추가/삭제된 부분이 테라코타 계열로 표시되도록 했다.
나머지 UI 전체(사이드바, 패널, 메뉴, 알림, 위젯 등)는 Pampas 배경에 Sand 보더로 통일했다. 복잡하게 영역마다 색을 다르게 주는 대신, 하나의 톤으로 밀어버리니까 오히려 깔끔하다.
설치 방법
간단하다. 두 단계면 끝난다.
먼저 VSCode 확장에서 ayu를 검색해서 설치하고, 컬러 테마를 ayu-light로 선택한다.
그 다음 Cmd+Shift+P로 커맨드 팔레트를 열고 Preferences: Open User Settings (JSON)을 선택한 뒤, 아래 JSON을 통째로 붙여넣으면 된다.
{
"workbench.colorTheme": "ayu-light",
"editor.fontSize": 12,
"window.zoomLevel": 0,
"workbench.colorCustomizations": {
"foreground": "#1A1A1A",
"editor.foreground": "#1A1A1A",
"editor.background": "#F4F3EE",
"editorWidget.background": "#F4F3EE",
"sideBar.background": "#F4F3EE",
"sideBar.foreground": "#1A1A1A",
"sideBar.border": "#E2E0D8",
"activityBar.background": "#F4F3EE",
"activityBar.foreground": "#C15F3C",
"activityBarBadge.background": "#C15F3C",
"activityBarBadge.foreground": "#F4F3EE",
"titleBar.activeBackground": "#F4F3EE",
"titleBar.inactiveBackground": "#F4F3EE",
"titleBar.activeForeground": "#1A1A1A",
"statusBar.background": "#C15F3C",
"statusBar.foreground": "#F4F3EE",
"statusBar.debuggingBackground": "#C15F3C",
"tab.activeBackground": "#F4F3EE",
"tab.activeForeground": "#1A1A1A",
"tab.inactiveBackground": "#F4F3EE",
"tab.inactiveForeground": "#6B6B6B",
"tab.activeBorderTop": "#C15F3C",
"editorGroupHeader.tabsBackground": "#F4F3EE",
"panel.background": "#F4F3EE",
"panel.border": "#E2E0D8",
"terminal.background": "#F4F3EE",
"terminal.foreground": "#1A1A1A",
"focusBorder": "#C15F3C",
"button.background": "#C15F3C",
"button.foreground": "#F4F3EE",
"button.hoverBackground": "#A84E30",
"button.secondaryBackground": "#E8E6DF",
"button.secondaryForeground": "#1A1A1A",
"button.secondaryHoverBackground": "#E2E0D8",
"button.border": "#E2E0D8",
"checkbox.background": "#F4F3EE",
"checkbox.foreground": "#1A1A1A",
"checkbox.border": "#B1ADA1",
"checkbox.selectBackground": "#C15F3C",
"checkbox.selectBorder": "#C15F3C",
"list.activeSelectionBackground": "#C15F3C30",
"list.activeSelectionForeground": "#1A1A1A",
"list.inactiveSelectionBackground": "#C15F3C20",
"list.inactiveSelectionForeground": "#1A1A1A",
"list.focusBackground": "#C15F3C30",
"list.focusForeground": "#1A1A1A",
"list.hoverBackground": "#E8E6DF",
"list.hoverForeground": "#1A1A1A",
"list.highlightForeground": "#C15F3C",
"list.focusHighlightForeground": "#C15F3C",
"editorLineNumber.foreground": "#B1ADA1",
"editorLineNumber.activeForeground": "#C15F3C",
"editorCursor.foreground": "#C15F3C",
"editor.selectionBackground": "#C15F3C33",
"editor.lineHighlightBackground": "#EEEDEA",
"scrollbarSlider.background": "#B1ADA144",
"scrollbarSlider.hoverBackground": "#B1ADA177",
"input.background": "#F4F3EE",
"input.foreground": "#1A1A1A",
"input.border": "#E2E0D8",
"dropdown.background": "#F4F3EE",
"dropdown.foreground": "#1A1A1A",
"dropdown.border": "#E2E0D8",
"sideBarSectionHeader.background": "#F4F3EE",
"sideBarSectionHeader.foreground": "#1A1A1A",
"sideBarSectionHeader.border": "#E2E0D8",
"panelSectionHeader.background": "#F4F3EE",
"panelSectionHeader.foreground": "#1A1A1A",
"panelSectionHeader.border": "#E2E0D8",
"badge.background": "#C15F3C",
"badge.foreground": "#F4F3EE",
"extensionButton.prominentBackground": "#C15F3C",
"extensionButton.prominentForeground": "#F4F3EE",
"extensionButton.prominentHoverBackground": "#A84E30",
"extensionButton.background": "#C15F3C",
"extensionButton.foreground": "#F4F3EE",
"extensionButton.hoverBackground": "#A84E30",
"notifications.background": "#F4F3EE",
"notifications.foreground": "#1A1A1A",
"notifications.border": "#E2E0D8",
"notificationCenterHeader.background": "#F4F3EE",
"notificationCenterHeader.foreground": "#1A1A1A",
"editorSuggestWidget.background": "#F4F3EE",
"editorSuggestWidget.foreground": "#1A1A1A",
"editorSuggestWidget.border": "#E2E0D8",
"editorSuggestWidget.selectedBackground": "#C15F3C22",
"editorHoverWidget.background": "#F4F3EE",
"editorHoverWidget.foreground": "#1A1A1A",
"editorHoverWidget.border": "#E2E0D8",
"peekViewEditor.background": "#F4F3EE",
"peekViewResult.background": "#F4F3EE",
"peekViewTitle.background": "#F4F3EE",
"peekViewTitleLabel.foreground": "#1A1A1A",
"peekView.border": "#C15F3C",
"menu.background": "#F4F3EE",
"menu.foreground": "#1A1A1A",
"menu.selectionBackground": "#C15F3C22",
"menu.selectionForeground": "#1A1A1A",
"menu.border": "#E2E0D8",
"menubar.selectionBackground": "#C15F3C22",
"menubar.selectionForeground": "#1A1A1A",
"commandCenter.background": "#F4F3EE",
"commandCenter.foreground": "#1A1A1A",
"commandCenter.border": "#E2E0D8",
"quickInput.background": "#F4F3EE",
"quickInput.foreground": "#1A1A1A",
"quickInputList.focusBackground": "#C15F3C22",
"quickInputList.focusForeground": "#1A1A1A",
"debugToolBar.background": "#F4F3EE",
"debugToolBar.border": "#E2E0D8",
"welcomePage.background": "#F4F3EE",
"walkThrough.embeddedEditorBackground": "#F4F3EE",
"toolbar.hoverBackground": "#E8E6DF",
"breadcrumb.background": "#F4F3EE",
"breadcrumb.foreground": "#6B6B6B",
"breadcrumb.focusForeground": "#1A1A1A",
"breadcrumb.activeSelectionForeground": "#C15F3C",
"statusBarItem.prominentHoverBackground": "#E8E6DF",
"pickerGroup.foreground": "#C15F3C",
"pickerGroup.border": "#E2E0D8",
"welcomePage.tileBackground": "#E8E6DF",
"welcomePage.tileBorder": "#E2E0D8",
"welcomePage.tileHoverBackground": "#E2E0D8",
"textBlockQuote.background": "#F4F3EE",
"textBlockQuote.border": "#C15F3C",
"diffEditor.insertedTextBackground": "#C15F3C15",
"diffEditor.removedTextBackground": "#C15F3C10",
"diffEditor.insertedLineBackground": "#C15F3C10",
"diffEditor.removedLineBackground": "#C15F3C08",
"diffEditorGutter.insertedLineBackground": "#C15F3C20",
"diffEditorGutter.removedLineBackground": "#C15F3C15",
"scm.providerBorder": "#E2E0D8",
"editorGutter.addedBackground": "#C15F3C",
"editorGutter.modifiedBackground": "#B1ADA1",
"editorGutter.deletedBackground": "#C15F3C88",
"widget.shadow": "#B1ADA133",
"widget.border": "#E2E0D8",
"multiDiffEditor.headerBackground": "#E8E6DF",
"multiDiffEditor.border": "#E2E0D8",
"multiDiffEditor.background": "#F4F3EE"
}
}
느낀 점
VSCode 테마를 처음부터 만드는 건 꽤 복잡한 일이지만, 이렇게 베이스 테마 위에 UI 색상만 덮어씌우는 방식은 진입장벽이 낮다. 코드 하이라이팅은 이미 잘 만들어진 테마를 빌려 쓰고, 나는 UI 프레임의 분위기만 바꾸면 되니까.
매일 몇 시간씩 보는 화면인데, 내가 좋아하는 색으로 채워져 있으면 기분이 다르다.
다음에 해볼 것
- 코드 문법 하이라이팅도 테라코타 톤에 맞게 커스텀 (
editor.tokenColorCustomizations) - VSCode 확장으로 패키징해서 마켓플레이스에 올리기
- 다크 모드 버전도 만들어볼까?