[TIL # 29] VSCode 테마 커스텀하기(배경색, 주석색, 글자색 바꾸기)

Yejin Yang·2022년 5월 23일

[TIL]

목록 보기

29/69

개요

vscode에서 테마를 Material Theme를 썼다가 Atom Theme를 사용했는데 태그들이 빨간색이고 써보니까 코드가 길어지면 구분이 잘 안가길래 다시 순정으로 돌아왔다. 그런데 배경색이 마음에 안들어서 바꿔보기로 했다.

Atom Theme

VSCODE Theme

아 역시 순정인가.. 파란색 태그들이 갑자기 마음에 들기 시작했다. 눈이 편안해지는 느낌. 근데 살짝 초코섞인 브라운 배경색이 마음에 안들어서 커스텀 해보기로 했다.

Theme Color

비주얼스튜디오 코드 공식 홈페이지에 테마 컬러 변경하는 방법이 나온다.
setting.json 파일을 열어서(Shift+Control+P)

Open the Settings editor
On Windows/Linux - File > Preferences > Settings
On macOS - Code > Preferences > Settings

방법

예시

// setting.json

{
  "workbench.colorCustomizations": {
    "activityBar.background": "#00AA00"
  }
}

"workbench.colorCustomizations" 옵션에 원하는 영역의 컬러들을 지정해주면 된다. Color Tool 참고하기

나는 아래와 같이 커스텀 했다.

 "workbench.colorCustomizations": {
    // vscdoe 전체 전경 색
    "editor.background": "#1f242b",
    // 맨 왼쪽 activityBar
    "activityBar.background": "#1f242b",
    // 사이드바(파일,폴더) 배경 색
    "sideBar.background": "#1f242b",
    // 그룹 헤더 전체 배경 색
    "editorGroupHeader.tabsBackground": "#1f242b",
    // 선택된 탭 배경색
    "tab.activeBackground": "#282f38",
    // 비활성인 탭 배경색
    "tab.inactiveBackground": "#1f242b",
    // 상단 타이틀 배경색
    "titleBar.activeBackground": "#26c6da",
    // 상단 타이틀 글자색
    "titleBar.activeForeground": "#fff",
    // 하단 상태 배경색
    "statusBar.background": "#26c6da",
  },

~~(하다가 이것도 질려서 바꿈..ㅎ)~~

Semantic 색상 변경

시맨틱 색상을 바꾸는 것은 여기를 참고하면 된다.

주석 색 바꾸기

  "editor.tokenColorCustomizations": {
    // 주석 색상
    "comments": "#757575",
  },

class나 function 등 entity 색 바꾸기

예시

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "entity.name.function",
        "settings": {
          "foreground": "#FF0000",
        }
      }
    ]
  },

"scope"에 색상을 바꾸고자하는 name명을 입력해주면 된다.

만약 this 키워드의 색상을 바꾸고 싶다면?

ctrl + shift + P

"Developer: Inspect Editor Tokens and Scopes" 를 클릭한다. 그리고 내가 원하는 키워드를 클릭하면 이름, 지정된 색상 정보들이 뜬다!

textmate scopes에 적혀진 이름으로 setting.json에서 설정해주면 된다!

"editor.tokenColorCustomizations": {

    "textMateRules": [
      {
        "scope": "variable.language.this.js",
        "settings": {
          "foreground": "#F2B807",
        }
      },