이 출시되었습니다! 11월의 새로운 기능 및 수정 사항을 읽어보세요.

테마

색 테마

색 테마를 사용하면 Visual Studio Code 사용자 인터페이스의 색상을 선호도 및 작업 환경에 맞게 수정할 수 있습니다. 색 테마는 VS Code 사용자 인터페이스 요소와 편집기 강조 색상 모두에 영향을 줍니다.

Preview themes from the Command Palette

다른 색 테마를 선택하려면

  1. 파일 > 기본 설정 > 테마 > 색 테마 메뉴 항목을 선택하거나 기본 설정: 색 테마 명령(⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T))을 사용하여 색 테마 선택기를 표시합니다.

  2. 위쪽 및 아래쪽 키를 사용하여 목록을 탐색하고 테마의 색상을 미리 봅니다.

  3. 원하는 테마를 선택하고 Enter 키를 누릅니다.

활성 색 테마는 사용자 설정(키보드 바로 가기 ⌘, (Windows, Linux Ctrl+,))에 저장됩니다.

  // Specifies the color theme used in the workbench.
  "workbench.colorTheme": "Solarized Dark"
팁

기본적으로 테마는 사용자 설정에 저장되며 모든 작업 영역에 전역적으로 적용됩니다. 작업 영역별 테마를 구성할 수도 있습니다. 이렇게 하려면 작업 영역 설정에서 테마를 설정합니다.

Screenshot of Settings editor to set a workspace-specific Color Theme.

마켓플레이스의 색 테마

VS Code에는 바로 사용 가능한 몇 가지 색 테마가 있습니다. 커뮤니티에서 VS Code 확장 프로그램 마켓플레이스에 훨씬 더 많은 테마를 업로드했습니다.

색 테마 선택기에서 추가 색 테마 찾아보기...를 선택하여 VS Code 마켓플레이스에서 직접 색 테마를 선택할 수 있습니다.

Screenshot of Color Theme picker, highlighting the option to browse themes from the VS Code Marketplace.

또는 확장 프로그램 보기(⇧⌘X (Windows, Linux Ctrl+Shift+X))의 검색 상자에서 @category:"themes" 필터를 사용하여 테마를 검색할 수 있습니다.

Searching for themes in the Extensions view

OS 색 구성표에 따라 자동 전환

Windows 및 macOS는 밝은 색 및 어두운 색 구성표를 지원합니다. window.autoDetectColorScheme 설정을 사용하면 VS Code가 OS의 색 구성표 변경 사항을 수신하고 해당 테마로 전환하도록 지시할 수 있습니다.

마찬가지로 window.autoDetectHighContrast 설정을 사용하여 OS가 고대비 색 구성표로 전환했는지 자동으로 감지할 수 있습니다.

색 구성표가 변경될 때 사용되는 테마를 사용자 지정하려면 설정 편집기에서 선호하는 밝은 테마, 어두운 테마 및 고대비 테마를 설정할 수 있습니다.

  • 워크벤치: 선호하는 어두운 색 테마 - 기본값은 Dark Modern입니다.
  • 워크벤치: 선호하는 밝은 색 테마 - 기본값은 Light Modern입니다.
  • 워크벤치: 선호하는 고대비 색 테마 - 기본값은 Dark High Contrast입니다.
  • 워크벤치: 선호하는 고대비 밝은 색 테마 - 기본값은 Light High Contrast입니다.

Settings editor filtered on the preferred color themes settings

색 테마 사용자 지정

워크벤치 색상

사용자 설정의 workbench.colorCustomizations 및 editor.tokenColorCustomizations를 사용하여 활성 색 테마를 사용자 지정할 수 있습니다.

목록 및 트리(파일 탐색기, 제안 위젯), 차이 편집기, 활동 표시줄, 알림, 스크롤 막대, 분할 보기, 단추 등 VS Code UI 요소의 색상을 설정하려면 workbench.colorCustomizations를 사용합니다.

activity bar theming

workbench.colorCustomizations 값을 설정할 때 IntelliSense를 사용하거나, 사용자 지정 가능한 모든 색상의 목록은 테마 색상 참조를 참조하십시오.

특정 테마에 대한 사용자 지정을 하려면 다음 구문을 사용합니다.

"workbench.colorCustomizations": {
    "[Monokai]": {
        "sideBar.background": "#347890"
    }
}

사용자 지정이 둘 이상의 테마에 적용되는 경우 여러 테마의 이름을 지정하거나 이름 시작과 끝에 와일드카드 *를 사용할 수 있습니다.

"workbench.colorCustomizations": {
    "[Abyss][Red]": {
        "activityBar.background": "#ff0000"
    },
    "[Monokai*]": {
        "activityBar.background": "#ff0000"
    }
}

테마가 색상 또는 테두리를 설정했는데 마음에 들지 않으면 default를 사용하여 원래 값으로 되돌릴 수 있습니다.

  "workbench.colorCustomizations": {
      "diffEditor.removedTextBorder": "default"
  }

편집기 구문 강조

편집기의 구문 강조 색상을 조정하려면 사용자 설정 settings.json 파일의 editor.tokenColorCustomizations를 사용합니다.

Token Color Customization

가장 일반적인 구조(예: '주석', '문자열')에 대한 미리 구성된 구문 토큰 세트가 있습니다. 더 많은 것을 원하면 TextMate 테마 색상 규칙을 직접 지정하여 수행할 수 있습니다.

Advanced Token Color Customization

참고

TextMate 규칙을 직접 구성하는 것은 TextMate 문법이 어떻게 작동하는지 이해해야 하므로 고급 기술입니다. 자세한 내용은 색 테마 가이드를 참조하십시오.

특정 테마를 사용자 지정하려면 다음 방법 중 하나를 사용할 수 있습니다.

"editor.tokenColorCustomizations": {
    "[Monokai]": {
        "comments": "#229977"
    },
    "[*Dark*]": {
        "variables": "#229977"
    },
    "[Abyss][Red]": {
        "keywords": "#f00"
    }
}

편집기 의미론적 강조

일부 언어(현재: TypeScript, JavaScript, Java)는 의미론적 토큰을 제공합니다. 의미론적 토큰은 언어 서비스의 기호 이해를 기반으로 하며 정규식을 기반으로 하는 TextMate 문법에서 나오는 구문 토큰보다 더 정확합니다. 의미론적 토큰에서 계산된 의미론적 강조는 구문 강조 위에 적용되며 다음과 같은 예에서와 같이 강조를 수정하고 보강할 수 있습니다.

의미론적 강조가 없는 "Tomorrow Night Blue" 색 테마

without semantic highlighting

의미론적 강조가 있는 "Tomorrow Night Blue" 색 테마

with semantic highlighting

언어 서비스 기호 이해에 따른 색상 차이를 확인하십시오.

  • 10행: languageModes는 매개변수로 색상이 지정됩니다.
  • 11행: Range 및 Position은 클래스로, document는 매개변수로 색상이 지정됩니다.
  • 13행: getFoldingRanges는 함수로 색상이 지정됩니다.

editor.semanticHighlighting.enabled 설정은 의미론적 강조가 적용되는지 여부를 제어하는 주요 역할을 합니다. true, false, configuredByTheme의 값을 가질 수 있습니다.

  • true 및 false는 모든 테마에 대해 의미론적 강조를 켜거나 끕니다.
  • configuredByTheme은 기본값이며 각 테마가 의미론적 강조를 활성화할지 여부를 제어할 수 있습니다. VS Code와 함께 제공되는 모든 테마(예: "Dark+" 기본값)는 기본적으로 의미론적 강조가 활성화되어 있습니다.

테마 설정을 재정의하려면

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true
    }
}

의미론적 강조가 활성화되고 언어에서 사용할 수 있는 경우 테마가 의미론적 토큰을 어떻게 색칠할지 제어합니다. 일부 의미론적 토큰은 표준화되어 있으며 잘 확립된 TextMate 범위에 매핑됩니다. 테마에 이러한 TextMate 범위에 대한 색상 규칙이 있는 경우 추가 색상 규칙이 필요 없이 해당 색상으로 의미론적 토큰이 렌더링됩니다.

추가 스타일링 규칙은 editor.semanticTokenColorCustomizations"에서 구성할 수 있습니다.

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true,
        "rules": {
            "*.declaration": { "bold": true }
        }
    }
}

계산된 의미론적 토큰과 스타일링 방법을 보려면 범위 검사기(개발자: 편집기 토큰 및 범위 검사)를 사용할 수 있습니다. 이 검사기는 현재 커서 위치의 텍스트에 대한 정보를 표시합니다.

scope inspector

주어진 위치의 언어에 대한 의미론적 토큰을 사용할 수 있고 테마에서 활성화된 경우 검사 도구는 의미론적 토큰 유형 섹션을 표시합니다. 이 섹션에는 의미론적 토큰 정보(유형 및 수정자 수)와 적용되는 스타일링 규칙이 표시됩니다.

의미론적 토큰 및 스타일링 규칙 구문에 대한 자세한 내용은 의미론적 강조 가이드에서 확인할 수 있습니다.

나만의 색 테마 만들기

테마 확장 프로그램을 만들고 게시하는 것은 쉽습니다. 사용자 설정에서 색상을 사용자 지정한 다음 개발자: 현재 설정에서 색 테마 생성 명령을 사용하여 테마 정의 파일을 생성합니다.

VS Code의 Yeoman 확장 프로그램 생성기는 나머지 확장 프로그램을 생성하는 데 도움이 됩니다.

자세한 내용은 확장 API 섹션의 새 색 테마 만들기 문서를 참조하십시오.

기본 색 테마 제거

VS Code와 함께 제공되는 기본 테마 중 일부를 색 테마 선택기에서 제거하려면 확장 프로그램 보기(⇧⌘X (Windows, Linux Ctrl+Shift+X))에서 비활성화할 수 있습니다. 확장 프로그램 보기 맨 위에 있는 확장 프로그램 필터 단추를 선택하고 빌드됨 옵션을 선택하면 기본 테마가 나열된 테마 섹션이 표시됩니다.

built-in themes

기어 컨텍스트 메뉴의 사용 안 함 명령을 사용하여 다른 VS Code 확장 프로그램과 마찬가지로 빌드된 테마 확장 프로그램을 비활성화할 수 있습니다.

disable theme

파일 아이콘 테마

파일 아이콘은 특정 파일 유형을 나타냅니다. 이러한 아이콘은 탐색기 보기 및 탭 머리글에 파일 이름 옆에 표시됩니다. 파일 아이콘 테마는 확장 프로그램에서 제공될 수 있습니다.

다른 파일 아이콘 테마를 선택하려면

  1. 파일 > 기본 설정 > 테마 > 파일 아이콘 테마 메뉴 항목을 선택하거나 기본 설정: 파일 아이콘 테마 명령을 사용하여 파일 아이콘 테마 선택기를 표시합니다.

  2. 위쪽 및 아래쪽 키를 사용하여 목록을 탐색하고 테마의 아이콘을 미리 봅니다.

  3. 원하는 테마를 선택하고 Enter 키를 누릅니다.

file icon theme dropdown

기본적으로 Seti 파일 아이콘 테마가 사용되며 탐색기 보기에서 이러한 아이콘을 볼 수 있습니다. VS Code는 다시 시작할 때까지 파일 아이콘 테마 선택을 기억합니다. 없음을 선택하여 파일 아이콘을 비활성화할 수 있습니다.

VS Code에는 Minimal 및 Seti의 두 가지 파일 아이콘 테마가 제공됩니다. 더 많은 파일 아이콘 테마를 설치하려면 파일 아이콘 테마 선택기에서 추가 파일 아이콘 테마 설치 항목을 선택하면 아이콘 테마별로 필터링된 확장 프로그램 보기가 열립니다.

사용 가능한 테마를 찾으려면 VS Code 마켓플레이스 사이트를 직접 찾아볼 수도 있습니다.

활성 파일 아이콘 테마는 사용자 설정(키보드 바로 가기 ⌘, (Windows, Linux Ctrl+,))에 지속됩니다.

  // Specifies the file icon theme used in the workbench.
  "workbench.iconTheme": "vs-seti"

나만의 파일 아이콘 테마 만들기

아이콘(가급적 SVG)을 사용하여 자신만의 파일 아이콘 테마를 만들 수 있습니다. 자세한 내용은 확장 API 섹션의 파일 아이콘 테마 문서를 참조하십시오.

웹용 VS Code

웹용 VS Code는 브라우저에서 완전히 실행되는 무료, 제로 설치 VS Code 환경을 https://vscode.dev에서 제공합니다.

URL 스키마: https://vscode.dev/editor/theme/<extensionId>를 통해 웹용 VS Code에서 색 테마를 공유하고 경험할 수 있습니다.

예를 들어, 다운로드 및 설치 프로세스를 거치지 않고 Night Owl 테마를 경험하기 위해 https://vscode.dev/editor/theme/sdras.night-owl로 이동할 수 있습니다.

테마 미리 보기 및 공유에 대한 자세한 내용은 웹용 VS Code 설명서에서 확인할 수 있습니다.

제품 아이콘 테마

제품 아이콘 테마를 사용하면 특정 파일 유형의 아이콘이 아닌 VS Code 사용자 인터페이스의 아이콘을 변경할 수 있습니다. 예를 들어 활동 표시줄의 보기 아이콘이나 레이아웃 변경을 위한 제목 표시줄의 아이콘을 수정할 수 있습니다.

다음 이미지에서 다른 제품 아이콘 테마를 선택할 때 활동 표시줄 아이콘이 어떻게 업데이트되는지 확인하십시오.

Screenshot of the Product Icon Theme dropdown, and how the Activity Bar icons are changed.

다른 제품 아이콘 테마를 선택하려면

  1. 파일 > 기본 설정 > 테마 > 제품 아이콘 테마 메뉴 항목을 선택하거나 기본 설정: 제품 아이콘 테마 명령을 사용하여 제품 아이콘 테마 선택기를 표시합니다.

  2. 위쪽 및 아래쪽 키를 사용하여 목록을 탐색하고 테마의 아이콘을 미리 봅니다.

  3. 원하는 테마를 선택하고 Enter 키를 누릅니다.

기본적으로 VS Code에는 하나의 제품 아이콘 테마인 기본이 제공됩니다. 제품 아이콘 테마 선택기에서 추가 제품 아이콘 테마 찾아보기...를 선택하여 VS Code 마켓플레이스에서 더 많은 제품 아이콘 테마를 선택할 수 있습니다.

다음 단계

테마는 VS Code를 사용자 지정하는 한 가지 방법일 뿐입니다. VS Code 사용자 지정 및 확장성에 대해 더 자세히 알고 싶다면 다음 문서를 시도해 보세요.

  • 설정 - 사용자 및 작업 영역 설정을 통해 VS Code를 환경 설정에 맞게 구성하는 방법을 알아봅니다.
  • 코드 조각 - 좋아하는 언어에 추가 코드 조각을 추가합니다.
  • 확장 API - VS Code를 확장하는 다른 방법을 알아봅니다.
  • 색 테마 - 색 테마 확장 API.
  • 파일 아이콘 테마 - 파일 아이콘 테마 확장 API.
12/10/2025
English 한국어 中文(简体)
© . This site is unofficial and not affiliated with Microsoft.