VS Code 라이트 테마 + 코드 색상 커스텀 (Go)
다크 테마를 쓰다 라이트로 바꿨더니 코드 색이 밋밋하고 흐릿했어요. 알고 보니 테마 문제가 아니라 시맨틱 하이라이트가 꺼져 있어서였죠. 라이트 테마를 고르고 → 색을 켜고 → 따뜻한 팔레트로 다듬는 전 과정을 정리했어요. (Go / gopls 기준)
① 라이트가 밋밋했던 건 테마 탓이 아니라 gopls 시맨틱 토큰이 꺼져 있어서였음 (기본 꺼짐).
② 흰 배경 가독성은 명도(진하게) + 굵기가 좌우 — 색만으론 한계가 있음.
③ 최종은 따뜻한 팔레트 + 정의·타입·함수·패키지만 굵게, 변수·필드는 차분하게.
라이트 테마 — GitHub Light로 고정
이 세팅은 GitHub Light를 기준으로 고정해요(설치 1위·GitHub 웹과 동일해 실패가 적음). 아래 나머지는 참고용 추천이에요.
| 테마 | 메모 |
|---|---|
| GitHub Light ← 고정 (이 글 기준)GitHub.github-vscode-theme | 설치 1위(1,880만+). GitHub 웹과 동일. 무난하고 실패가 적어요. |
| Bluloco Light · 참고uloco.theme-bluloco-light | 변수·메서드까지 색이 풍부 → 밋밋함의 가장 쉬운 해답. |
| Catppuccin Latte · 참고Catppuccin.catppuccin-vsc | 커뮤니티 최애. 파스텔 라이트 변형. 설치 급상승. |
| Atom One Light / Quiet Light / Solarized Light · 참고클래식 · 일부 내장 | 부드러운 고전 라이트. Solarized는 눈 피로가 적기로 유명(크림 배경 전제). |
| Vitesse Light / Noctis Lux · 참고antfu / liviuschera | 미니멀·밝은 변형. 최근 인기. |
참고 — 위 다른 테마는 취향에 따라 바꿔도 돼요. 아래 색상 커스텀(3~5단계)은 테마와 무관하게 적용됩니다.
테마 바꾸기
- Cmd/Ctrl+Shift+P → Preferences: Color Theme
- ↑ ↓ 로 실시간 미리보기, Enter 확정 · Esc 원복
- 단축키로도: Cmd/Ctrl+K → Cmd/Ctrl+T
window.autoDetectColorScheme: true 로 OS 라이트/다크에 맞춰 자동 전환도 가능해요.
코드 색 켜기 — 시맨틱 하이라이트 (두 관문)
Go는 두 관문을 다 열어야 색이 나와요. 색이 안 나오던 진짜 원인이 관문 1이었어요.
기본이 꺼짐(experimental). 안 켜면 빈 응답이라 칠할 대상 자체가 없어요. string·number는 꺼서 문자열·숫자 색을 TextMate에 넘겨요.
semanticHighlighting.enabled. configuredByTheme거나 작업 영역(.vscode/settings.json)에 눌려 있으면 안 떠요.
Hack 폰트는 리가처·중간굵기가 없어요 → fontWeight: normal, 리가처 제외. Bold(700)는 있어서 굵기 강조는 정상 작동해요.
색상 팔레트 & 굵기
따뜻한 톤(파랑·금색·틸·슬레이트·보라 + 녹색 주석·마젠타 문자열). 흰 배경 대비를 위해 명도를 낮춘 값이에요.
// 1. 풀 조회
c, err := ms.QueryPool(req.Profile)
log.Infow("msg", "done")
}
굵기 원칙 — 정의된 것·타입·호출 대상(함수/메서드/타입/패키지)은 굵게, 그걸 담는 변수·필드·파라미터는 일반. 리시버 ms가 가늘어져 ms.method()에서 메서드가 앞으로 나와요. namespace 굵기는 취향(무거우면 "bold": false로).
이 글의 팔레트는 따뜻한 톤(Set A)이에요. 굵기 없이 색상만으로 최대한 구분하는 가독성 우선 팔레트(Set B)도 따로 정리했으니, 같은 Go 코드로 비교해 보세요.
대안 팔레트 — 테마에 맡기려면 이 rules를 빼면 돼요. 순정이 필요하면 — VS Code Light+ func #795e26 / type #267f99 / var #001080, GitHub Light func #8250df / type #953800 / var #0550ae.
최종 settings.json
폰트 + 두 관문 + 확정 팔레트/굵기 + 주석·문자열까지 전체 합본이에요.
{
// 폰트 — Hack (리가처·중간굵기 없음)
"editor.fontFamily": "'Hack', 'D2Coding', Consolas, monospace",
"editor.fontSize": 14,
"editor.lineHeight": 1.6,
"editor.fontWeight": "normal",
// 관문 1·2 — 시맨틱 토큰 켜기
"editor.semanticHighlighting.enabled": true,
"[go]": { "editor.semanticHighlighting.enabled": true },
"gopls": {
"ui.semanticTokens": true,
"ui.semanticTokenTypes": { "string": false, "number": false }
},
// 확정 팔레트 + 굵기
"editor.semanticTokenColorCustomizations": {
"enabled": true,
"rules": {
"function": { "foreground": "#0353a4", "bold": true },
"method": { "foreground": "#0353a4", "bold": true },
"type": { "foreground": "#8f5700", "bold": true },
"namespace": { "foreground": "#005f54", "bold": true },
"variable": "#2b3640",
"parameter": "#5324b8",
"property": "#2b3640"
}
},
// 주석·문자열 (TextMate)
"editor.tokenColorCustomizations": {
"comments": "#007a00",
"textMateRules": [
{
"scope": ["comment", "comment.line", "comment.block", "punctuation.definition.comment"],
"settings": { "foreground": "#007a00" }
},
{
"scope": ["string", "string.quoted", "string.quoted.double", "constant.other.placeholder"],
"settings": { "foreground": "#b0008e" }
}
]
},
// 코드 구분 · 화면 · 저장
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
"editor.minimap.enabled": false,
"editor.smoothScrolling": true,
"files.autoSave": "afterDelay",
"editor.formatOnSave": true
}붙여넣은 뒤 Go: Restart Language Server. 특정 색만 바꾸려면 해당 hex만 교체, 굵기를 빼려면 그 토큰을 "#hex" 문자열 형태로 되돌리면 돼요.
미세 튜닝 (선택)
지금도 완성도 높아요. 나중에 손보고 싶을 때 꺼내는 옵션들.
- 패키지가 무겁다 → namespace 굵기 빼거나 색을 #3a8078로 연하게(뒤로 물러남)
- 정의부만 강조 → function.declaration/method.declaration만 bold, 호출은 일반
- 필드를 변수와 구분 → property를 #3a5f6a로 살짝 분리
- 굵어서 빽빽하면 → 색·굵기가 아니라 lineHeight 문제. 1.6 → 1.7~1.8
- 배경이 너무 희면 → editor.background를 #faf8f2 크림으로 (Solarized계 색이 살아남)