[VS Code] 내맘대로 컬러 테마 편집하기

개요

좌) 편집 전 / 우) 편집 후

컬러 테마를 쓰다 보면 하이라이팅이 없는 부분이나 맘에 안 드는 부분이 생길 때가 있다. 설정에서 직접 문법 토큰을 선택해 원하는 부분에 직접 문법 하이라이팅을 적용해 주자!

본문

Inspect Tokens and Scopes로 문법 토큰 확인하기

 

전체 명령어 목록: ctrl + shift + p  

전체 명령어 목록에서 개발자: 편집기 토큰 및 범위 검사(Developer: Inspect Editor Tokens and Scopes 모드를 실행하자.



이제 하이라이팅된 부분의 textmate 문법 토큰을 확인할 수 있다.  이때 둘째 칸 foreground에서 각 줄의 의미는

• 첫째 줄 (variable.other.enummember.c): 현재 선택한 부분의 문법 토큰
• 둘째 줄부터 (variable.other): 선택한 문법 토큰과 같은 문법 하이라이팅이 적용되는 문법 토큰의 목록
• 중괄호 내부: 적용된 문법 스타일

이다. 첫째 줄의 문법 (예제에서는 variable.other.enummember.c)을 복사해 주자.

editor.tokenColorCustomizations로 커스텀 문법 하이라이팅 적용하기

    "editor.tokenColorCustomizations": {
        "[GitHub Dark]": { // [적용할 컬러 테마의 이름]
            "textMateRules": [
                {
                    "scope": [ // 적용할 문법 토큰 범위
                        "variable.other.enummember.c",
                        "entity.name.function.preprocessor.c"
                    ],
                    // 한 줄로 표현하고 싶다면
                    // "scope": "variable.other.enummember.c",
                    "settings": { // 적용할 css 스타일
                        "foreground": "#ffd387",
                    }
                }
            ]
        }
    },

settings.json (기본 설정 -> 설정 -> 우상단 페이지 버튼) 에 위와 같은 json 규칙을 추가해 주자. 얼마던 확장할 수 있다.

끝

예 쁘 다!