[VSCode] VSCode 커스텀하기

VSCode 테마가 질려서 직접 커스텀해 바꿔보기로 했다.

 

setting.json 변경

vsc에 접속해서 [Shift + Ctrl + P] 혹은 검색바에 [>] 꺽새를 입력하고 setting.json에 접속한다.

workbench.colorCustomiztions에 원하는 색상을 입력해주면 된다.
(색상 추천은 챗지피티한테 받음 ㅎㅎ)

 

하다보니 욕심이 생겨서 거의 모든 설정을 바꿔줬다

"workbench.colorCustomizations": {
    "focusBorder": "#4c5669",
    "list.hoverBackground": "#2c323d",
    "titleBar.activeBackground": "#4C566A", //위쪽 타이틀 바
    "titleBar.inactiveBackground": "#4c566a",
    "editor.background": "#2E3440", // 배경색
    "editor.foreground": "#D8DEE9",
    "editor.lineHighlightBackground": "#4C566A", // 선택한 라인 색
    "editorWhitespace.foreground": "#616E88",
    "editor.selectionBackground": "#5E81AC", // 드래그 색
    "editorCursor.foreground": "#88C0D0", // 커서 색
    "activityBar.background": "#4C566A", // 왼쪽 메뉴바
    "activityBar.border": "#4C566A",
    "activityBar.foreground": "#D8DEE9",
    "activityBar.activeBorder": "#D8DEE9",
    "activityBar.inactiveForeground": "#979ba3",
    "activityBarBadge.background": "#34699A",
    "menu.background": "#242933",
    "menu.separatorBackground": "#242933",
    "menu.border": "#242933",
    "button.background": "#4c5669",
    "button.border": "#4c5669",
    "button.hoverBackground": "#444D5E",
    "titleBar.border": "#4C566A",
    "statusBar.background": "#434C5E", // 하단 상태바
    "statusBar.border": "#434C5E",
    "tab.activeBackground": "#3B4252", //focus 된 탭
    "tab.activeBorder": "#3B4252",
    "tab.border": "#2c323d",
    "tab.activeBorderTop": "#EBCB8B",
    "tab.hoverBackground": "#4e5463",
    "tab.inactiveBackground": "#3B4252", //비활성화 탭 배경색 
    "editorGroupHeader.tabsBorder": "#3B4252", //탭 아래쪽 테두리 색
    "editorGroupHeader.border": "#2E3440",
    "input.background": "#2E3440",
    "input.border": "#2E3440",
    "sideBar.background": "#3B4252", // 트리 배경색
    "sideBar.border": "#3B4252",
    "sideBarSectionHeader.background": "#2c323d", // 트리 최상단 배경색
    "editorGroupHeader.tabsBackground": "#3B4252",
    "terminal.background": "#2E3440", //#2C323D
    "panel.background": "#4C566A",
    "panel.border": "#4C566A",
    "panelTitle.activeBorder": "#EBCB8B",
    "panelTitle.activeForeground": "#EBCB8B",
    "panelTitle.inactiveForeground": "#D8DEE9",
    "badge.background": "#5E81AC",
  },

 

위 설정에 맞춰 텍스트 설정을 바꾸는 방법도 있다.
일단 가장 많이 쓰는 yaml과 python만 설정해주었다.
근데 vsc 내에서 remote ssh를 쓰면 yaml은 안그러는데 파이썬은 설정이 안먹는 오류가 발생함.. 추후 찾아봐야겠음

 

먼저 동일하게  [Shift + Ctrl + P] 혹은 검색바에 [>] 꺽새를 입력하고 " Developer: Inspect Editor Tokens and Scopes"를 입력한다.
해당 설정을 클릭하면 Editor 창에 아래와 같은 설명이 뜨는데, 이를 통해 내가 선택한 키워드가 어떤 정보를 가지고 있는지 알 수 있다.

확인 후, setting.json에 접속해서 scope와 foreground 색상을 설정해주면 된다.

"editor.tokenColorCustomizations": {
    "comments": "#7D8799",
    "textMateRules": [
      {
        "scope": "variable.parameter",
        "settings": {
          "foreground": "#F78C6C"
        }
      },
      {
        "scope": "variable.other.global",
        "settings": {
          "foreground": "#e54611"
        }
      },
      {
        "scope": "entity.name.tag.yaml",
        "settings": {
          "foreground": "#C792EA"
        }
      },
      {
        "scope": [
          "string.unquoted.plain.out.yaml", // YAML 값 (일반 문자열)
          "string.quoted.single.yaml", // 작은따옴표 값
          "string.quoted.double.yaml", // 큰따옴표 값
        ],
        "settings": {
          "foreground": "#E5C07B"
        }
      },
      {
        "scope": "string.unquoted.block.yaml",
        "settings": {
          "foreground": "#B0D97E"
        }
      },
      {
        "scope": [
          "punctuation.definition.comment.yaml",
          "comment.line.number-sign.yaml",
          "source.yaml",
          "comment punctuation.definition.comment"
        ],
        "settings": {
          "foreground": "#7D8799"
        }
      },
      {
        "scope": "entity.name.type.class.python",
        "settings": {
          "foreground": "#C678DD" // 클래스 이름 색상
        }
      },
      {
        "scope": "entity.name.function.python",
        "settings": {
          "foreground": "#61AFEF" // 함수 이름 색상
        }
      },
      {
        "scope": "variable.parameter.python",
        "settings": {
          "foreground": "#E5C07B" // 함수 매개변수 색상
        }
      },
      {
        "scope": "constant.language.python",
        "settings": {
          "foreground": "#C678DD" // 상수 색상
        }
      },
      {
        "scope": "string.quoted.single.python",
        "settings": {
          "foreground": "#98C379" // 문자열 색상
        }
      },
      {
        "scope": "source.python",
        "settings": {
          "foreground": "#FFFACD" // Python 코드 기본 색상
        }
      }
    ]
  },

 

참고:
https://code.visualstudio.com/api/references/theme-color#text-colors