Programing

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

lottogame 2020. 11. 14. 09:46
반응형

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


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

Visual Studio Code에서 기본 어두운 테마를 편집하는 방법이 있습니까? % USERPROFILE % .vscode 폴더에는 확장의 테마 만 있고 설치 경로 (기본 C : \ Program Files (x86) \ Microsoft VS Code 사용)에는 \ resources \ app \에 일부 표준 테마의 파일이 있습니다. Kimbie Dark, Solarized Dark / Light 또는 Monokai의 변형과 같은 확장이지만 기본 어두운 테마는 없습니다.

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


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

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

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


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"
}

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

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

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

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

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

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

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


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

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

자세한 내용은 다음 문서를 참조하십시오. 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 : 명확히하기 위해 :


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


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

색상 사용자 정의 편집

테마를 만들고 싶다면

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

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


I'm not sure if this answer suits here, but I would like to share a solution for MAC users and it looks awkward if I start a new question and answer myself there.

[Solution for MAC OS]
look for your VSCode theme path something like below:

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

open .json file and look for your targeted styles to change.
For my case, I want to change the whitespace render colour
and I've found it as
"editorWhitespace.foreground"
so under settings.json in Visual Studio Code,
I added the following lines (I do in Workspace Settings),

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

Solutions guided from : https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme


Don't forget to ⌘ Command+S save settings to take effect.


The docs now have a whole section about this.

Basically, use npm to install yo, and run the command yo code and you'll get a little text-based wizard -- one of whose options will be to create and edit a copy of the default dark scheme.


As others have stated, you'll need to override the editor.tokenColorCustomizations or the workbench.colorCustomizations setting in the settings.json file. Here you can choose a base theme, like Abyss, and only override the things you want to change. You can either override very few things like the function, string colors etc. very easily.

E.g. for workbench.colorCustomizations

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

E.g. for 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를 참조하세요.

참고 URL : https://stackoverflow.com/questions/35165362/how-to-edit-default-dark-theme-for-visual-studio-code

반응형