Visual Studio Code의 기본 어두운 테마를 편집하는 방법은 무엇입니까?

88

Windows 7 64 비트를 사용하고 있습니다.

Visual Studio Code에서 기본 어두운 테마를 편집하는 방법이 있습니까? 에서 %USERPROFILE%\.vscode폴더 확장 만 테마는 설치 경로에 (I 기본을 사용하면서, 거기 C:\Program Files (x86)\Microsoft VS Code)가 몇 가지 표준 테마 파일입니다 \resources\app\extensionsKimbie 다크, 솔라리 다크 / 라이트 등, 또는 Monokai의 변형,하지만 기본 어두운 테마가 없습니다.

그러나 결국 그것을 편집 할 가능성이 있다면 어떤 코드 블록이 C ++ 언어에서 객체의 멤버, 포인터의 멤버, 클래스 및 구조의 이름을 담당합니까?

themes  visual-studio-code 
— Toreno96
소스
4
여기에 오는 모든 사람을 위해 : 테마 파일을 찾고 수정하거나 만들 필요가 없습니다. 모든 것이 사용하여 수정할 수 있습니다 workbench.colorCustomizations및 editor.tokenColorCustomizations사용자 설정에 : code.visualstudio.com/docs/getstarted/...을 .
— chipit24
하나는 또한 부실한 상태를 유지할 수 있지만 Atoms Edit -> Stylesheet...문제에 대한 마지막 변경 사항은 March github.com/Microsoft/vscode/issues/459 와 같이 사용자 지정 전역 CSS를 추가 할 수있는 기능에 대해 작업 중 입니다. 댓글이 닫혀서 유감입니다. 현재 API는 확장 프로그램이 전역 CSS를 수정하는 것을 허용하지 않으므로, 기다리거나 원시인과 같은 개발자 도구에 CSS를 수동으로 붙여 넣어야합니다.
— Ray Foss

답변:

47

찾고있는 파일이 있습니다.

Microsoft VS Code \ resources \ app \ extensions \ theme-defaults \ themes

Windows에서 파일 이름 dark_vs.json을 검색하여 다른 시스템에서 찾습니다.

최신 정보:

새 버전의 VSCode를 사용하면 테마를 사용자 지정하기 위해 설정 파일을 찾을 필요가 없습니다. 이제 workbench.colorCustomizations및 editor.tokenColorCustomizations사용자 설정으로 색상 테마를 사용자 지정할 수 있습니다 . 문제에 대한 문서는 여기 에서 찾을 수 있습니다 .

— Paarandika
소스
11
Linux에서는/usr/share/code/resources/app/extensions/theme-defaults/themes
— sigalor jul.
1
Arch Linux에서 (오픈 소스 릴리스)/usr/lib/code/extensions/theme-defaults/themes
— hendalst
3
기본적으로 VS Code는 C : \ users \ {username} \ AppData \ Local \ Programs \ Microsoft VS Code
— Toivo Säwén
2
이 답변에 대한 업데이트는 건전한 권장 사항입니다. 테마 파일을 직접 편집하면 VS Code 업데이트시 덮어 쓸 수 있음을 발견했습니다.
— cniggeler
73

VS 코드 '사용자 설정'에서 다음 태그를 사용하여 보이는 색상을 편집 할 수 있습니다 (샘플이며 훨씬 더 많은 태그가 있습니다).

"workbench.colorCustomizations": {
    "list.inactiveSelectionBackground": "#C5DEF0",
    "sideBar.background": "#F8F6F6",
    "sideBar.foreground": "#000000",
    "editor.background": "#FFFFFF",
    "editor.foreground": "#000000",
    "sideBarSectionHeader.background": "#CAC9C9",
    "sideBarSectionHeader.foreground": "#000000",
    "activityBar.border": "#FFFFFF",
    "statusBar.background": "#102F97",
    "scrollbarSlider.activeBackground": "#77D4CB",
    "scrollbarSlider.hoverBackground": "#8CE6DA",
    "badge.background": "#81CA91"}

일부 C ++ 색상 토큰을 편집하려면 다음 태그를 사용하십시오.

"editor.tokenColorCustomizations": {
    "numbers": "#2247EB",
    "comments": "#6D929C",
    "functions": "#0D7C28"
}
— Chethaka Uduwarage
소스
1
하지만 tokenColorCustomizations를 넘어서는 경우 어떻게해야합니까?
— Alex
"editor.tokenColorCustomizations"에서 사용 가능한 모든 옵션 목록을 어디에서 찾을 수 있습니까?
— ololobus
2
— ololobus
내 편집은 어떤 이유로 거부되었지만 특정 테마를 변경하려는 OP의 욕구를 구체적으로 해결하기 위해 테마 파일을 변경하지 않고 테마를 지정하고 색상을 수정할 수 있습니다. "workbench.colorCustomizations": { "[Kimbie Dark]" : { "activityBar.foreground": "# 472c0c"}}
— aamarks
설정에서 "Workbench : Color Customizations"라고합니다
— Zach Saucier
29

테마에 관한 한 VS Code는 Sublime만큼 편집 가능합니다. VS 코드와 함께 제공되는 기본 테마를 편집 할 수 있습니다. 테마 파일을 어디에서 찾을 수 있는지 알아야합니다.

참고 : 저는 Monokai 테마를 좋아합니다. 그러나 내가 바꾸고 싶었던 것은 배경뿐이었습니다. 나는 어두운 회색 배경이 마음에 들지 않습니다. 대신 단색 검정색 배경에서 대비가 훨씬 더 좋다고 생각합니다. 코드가 훨씬 더 많이 나타납니다.

어쨌든, 나는 테마 파일을 찾고 다음에서 (윈도우에서) 발견했습니다.

c : \ Program Files (x86) \ Microsoft VS Code \ resources \ app \ extensions \ theme-monokai \ themes \

그 폴더에서 Monokai.tmTheme 파일을 발견하고 다음과 같이 첫 번째 배경 키를 수정했습니다.

<key>background</key>
<string>#000000</string>

테마 파일에는 '배경'키가 몇 개 있습니다. 올바른 키를 수정했는지 확인하세요. 내가 편집 한 것은 맨 위에있었습니다. 12 행인 것 같아요.

— iviouse
소스
5
Ubuntu 설치 위치는 다음과 같습니다/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_vs.json
— Max
5
및 Mac 용, 내가 이러한 경로에 파일을 업데이트가 일을 발견 /Users/user-name/.vscode/extensions/azemoh.one-monokai-0.3.3/themes/OneMonokai-color-theme.jsoncmd를 + Shift + P와 유형이 reload window변경 사항을 즉시 사용해 cmd를 :)
— balajikris
1
테마 배경 수정은 "workbench.colorCustomizations": { "[Theme You Want to Update]": { "editor.background": "#000000" }사용자 설정에서 수행 할 수도 있습니다 .
— Bilbo
1
Windows의 64 비트 VS Code의 경우 기본 경로는 C:\Program Files\Microsoft VS Code\resources\app\extensions\ 일반적으로 뒤에theme-....
— Peter B
을 사용하여 사용자 설정에서 테마를 수정합니다 "workbench.colorCustomizations": { "editor.background": "#000" },. 여기에 당신이 할 수있는 모든 다른 사용자 정의는 다음과 같습니다 code.visualstudio.com/api/references/theme-color
— 제레미 모리츠
17

기본 테마는 "편집"할 수 없으며 "잠겨"있습니다.

그러나 원하는대로 정확하게 수정하여 사용자 지정 테마에 복사 할 수 있습니다.

자세한 내용은 다음 문서를 참조하십시오. https://code.visualstudio.com/Docs/customization/themes https://code.visualstudio.com/docs/extensions/install-extension#_your-extensions-folder

변경하고 싶은 것이 C ++ 코드의 색상뿐이라면 C ++ 지원 컬러 라이저 덮어 쓰기를 살펴 봐야합니다. 이에 대한 정보는 https://code.visualstudio.com/docs/customization/colorizer에서 확인 하십시오.

편집 : 어두운 테마는 여기에서 찾을 수 있습니다 : https://github.com/Microsoft/vscode/tree/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults

EDIT2 : 명확히하기 위해 :

— 토비아 잘라 레즈
소스
1
그리고 어디서 복사 할 수 있습니까? 당신이 나에게 보낸 기사에는 그것에 대해 아무것도 없습니다. 그리고 나는 구문 강조를 약간 변경하는 것과 같은 사소한 일을 위해 아무것도 설치하고 싶지 않습니다. 특히 기본 테마가 잠겨 있지 않은 경우 올바른 파일을 열고 몇 줄의 코드를 수정할 수있을 때 특히 그렇습니다. 게다가 Yeoman Generator로 새 테마를 생성하려면 다른 테마의 .tmTheme 파일이 필요합니다. ColorSublime 웹 사이트에는 Visual Studio 다크 테마가 없으며 VSC에서 "잠긴 테마"에 액세스 할 수 없습니다.
— Toreno96 2016
"C : \ Program Files (x86) \ Microsoft VS Code \ resources \ app \ extensions \ cpp"에서 c ++. plist 파일을 편집 할 수 있습니까? 하지만 어떤 코드 블록을 변경해야합니까? 아니면 어딘가에 VSC 기본 어두운 테마의 소스 파일이있을 수 있는데,이 파일을 사용하여 나만의 사용자 지정 테마를 만들 수 있습니까?
— Toreno96 2016
소스 코드 내에 저장되어 있다고 믿기 때문에 편집 할 수 없습니다. 그러나 복사 / 붙여 넣기하고 몇 줄을 변경할 수 있습니다. GitHub에 있습니다. 나는 당신을 위해 그것을 발견 github.com/Microsoft/vscode/tree/... 편집 대답을 링크
— 도비야 Zarlez에게
내가 언급 한 c ++. plist 파일을 편집하는 것이 가능합니다. 그리고 컬러 라이저에 대한 기사에서 이것이 C ++ 언어의 표준 컬러 라이저 파일이라는 것을 이해했습니다. 틀 렸으면 고쳐줘. 그러나 여전히 기본 테마 편집에 대해 이야기하고 있다면-예, 그렇게 할 수 없다는 것을 알고 있습니다. 첫 번째 답변에서 문장을 이해했습니다. GitHub 및 링크의 소스 코드에 대한 정보를 제공해 주셔서 감사합니다. 그러나 기본 항목이 아니라 수정 된 테마가있는 테마를 확인했습니다. 불행히도 내가 원하는 방식은 아닙니다.
— Toreno96
1
그러나 우연히 확장 갤러리의 "Xcodedefault"테마가 기본 어두운 것과 동일한 구문을 강조한다는 것을 알게되었습니다. 이제 내 디스크의 확장 폴더에 있기 때문에 설치 후 기본 다크 테마를 수정하고 싶었던 것처럼 수정할 수 있습니다. 그래서 내 문제가 해결되었습니다.
— Toreno96
15

가장 간단한 방법은 사용자 설정을 편집하고 workbench.colorCustomizations

색상 사용자 정의 편집

테마를 만들고 싶다면

현재 테마 설정을 복사하고 *.color-theme.jsonJSON5 파일 로 저장할 수있는 현재 테마를 수정하는 옵션도 있습니다.

현재 설정에서 색상 테마 생성

— 제이 윅
소스
1
더 좋고 쉬운 대답이 먼저 나오도록 대답 순서를 바꾸고 싶으신가요? =]
— Relequestual
14

VS Code 버전 1.12 이상의이 설정 섹션에서 모든 색상 테마를 변경할 수 있습니다.

 // Overrides colors from the currently selected color theme.
  "workbench.colorCustomizations": {}

참조 https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme를

편집 가능한 값 : https://code.visualstudio.com/docs/getstarted/theme-color-reference

편집 : 구문 색상을 변경하려면 여기를 참조하십시오 : https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_syntax-highlighting-colors 및 여기 : https://www.sublimetext.com/docs/ 3 / scope_naming.html

— 필요한 것
소스
이를 통해 편집기 자체의 색상을 재정의 할 수 있지만 일부 키워드의 색상은 무시할 수 있습니다 (예 : strings color).
— Jhegs
6

다른 사람들이 언급했듯이 settings.json 파일 의 editor.tokenColorCustomizations또는 workbench.colorCustomizations설정 을 재정의해야 합니다. 여기서 Abyss와 같은 기본 테마를 선택하고 변경하려는 항목 만 재정의 할 수 있습니다. 함수, 문자열 색상 등과 같은 몇 가지 항목을 매우 쉽게 재정의 할 수 있습니다.

예 : workbench.colorCustomizations

"workbench.colorCustomizations": {
    "[Default Dark+]": {
        "editor.background": "#130e293f",
    }
}

예 editor.tokenColorCustomizations:

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "functions": "#FF0000",
        "strings": "#FF0000"
    }
}
// Don't do this, looks horrible.

그러나 var키워드 색상 변경과 같은 심층적 인 사용자 지정 은 textMateRules키 아래에 재정의 값을 제공해야합니다 .

예 :

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "textMateRules": [
            {
                "scope": "keyword.operator",
                "settings": {
                    "foreground": "#FFFFFF"
                }
            },
            {
                "scope": "keyword.var",
                "settings": {
                    "foreground": "#2871bb",
                    "fontStyle": "bold"
                }
            }
        ]
    }
}

테마 전체에서 전역 적으로 재정의 할 수도 있습니다.

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": [
                //following will be in italics (=Pacifico)
                "comment",
                "entity.name.type.class", //class names
                "keyword", //import, export, return…
                //"support.class.builtin.js", //String, Number, Boolean…, this, super
                "storage.modifier", //static keyword
                "storage.type.class.js", //class keyword
                "storage.type.function.js", // function keyword
                "storage.type.js", // Variable declarations
                "keyword.control.import.js", // Imports
                "keyword.control.from.js", // From-Keyword
                //"entity.name.type.js", // new … Expression
                "keyword.control.flow.js", // await
                "keyword.control.conditional.js", // if
                "keyword.control.loop.js", // for
                "keyword.operator.new.js", // new
            ],
            "settings": {
                "fontStyle": "italic"
            }
        }
    ]
}

자세한 내용은 https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide를 참조하세요.

— Varun Achar
소스
5

MAC OS 용 솔루션

이 답변이 여기에 적합한 지 확실하지 않지만 MAC 사용자를위한 솔루션을 공유하고 싶습니다. 새로운 질문을 시작하고 거기에서 스스로 대답하면 어색해 보입니다.


아래와 같은 VSCode 테마 경로를 찾으십시오.

..your_install_location / Visual Studio Code.app/Contents/Resources/app/extensions/theme-name/themes/theme_file.json

.json 파일을 열고 변경할 대상 스타일을 찾습니다.
저의 경우는 공백이 렌더링 색 변경하고자
하고 나는 그것이 같은 발견했습니다
"editorWhitespace.foreground"
그래서 아래 settings.json의 Visual Studio 코드에서,
나는 (내가 작업 영역 설정에서 할) 다음 줄을 추가,

"workbench.colorCustomizations": {
    "editorWhitespace.foreground": "#93A1A130" // stand as #RRGGBBAA
}

솔루션 안내 : https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme


적용하려면 ⌘ Command+ S설정을 저장하는 것을 잊지 마십시오 .

— elliotching
소스
2

문서는 지금에 대한 전체 섹션이 있습니다.

기본적으로을 사용하여을 npm설치 yo하고 명령을 실행하면 yo code텍스트 기반 마법사가 표시됩니다.이 마법사 중 하나는 기본 다크 스킴의 복사본을 만들고 편집하는 것입니다.

— LeeGee
소스
1

테마를 편집하는 방법을 찾기 위해 여기에 왔지만 내 Mac에서 찾을 수 없습니다. 심층 분석 후 마침내 설치 장소를 찾았습니다.

~/.vscode/extensions

거기에 모든 확장이 있습니다!

— 코드 녹스
소스
이 답변은 훌륭합니다. 부당하게 반대 투표를 받았습니다.
— Polymerase
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.