Jak edytować domyślny ciemny motyw dla programu Visual Studio Code?


88

Używam 64-bitowego systemu Windows 7.

Czy istnieje sposób edytowania domyślnego ciemnego motywu w Visual Studio Code? W %USERPROFILE%\.vscodefolderze znajdują się tylko motywy z rozszerzeń, natomiast w ścieżce instalacji (użyłem domyślnej C:\Program Files (x86)\Microsoft VS Code) znajdują się pliki niektórych standardowych motywów w \resources\app\extensions, takich jak Kimbie Dark, Solarized Dark / Light lub warianty Monokai, ale nie ma domyślnego ciemnego motywu.

Ale jeśli mimo wszystko istnieje możliwość jego edycji, to które bloki kodu odpowiadają za kolor elementu członkowskiego obiektu, członka wskaźnika oraz nazwę klasy i struktury w języku C ++?


4
Dla każdego, kto tu przyjeżdża: nie musisz szukać, modyfikować ani tworzyć żadnych plików motywów. Wszystko można modyfikować za pomocą workbench.colorCustomizationsiw editor.tokenColorCustomizationsustawieniach użytkownika: code.visualstudio.com/docs/getstarted/… .
chipit24

Można też liczyć na nieaktualną, ale pracowaną nad funkcją, która pozwoliłaby nam dodać niestandardowy globalny CSS, na przykład Atoms Edit -> Stylesheet...Ostatnia zmiana w tym wydaniu to marzec github.com/Microsoft/vscode/issues/459 . To rozczarowujące, że jest zamknięty dla komentarzy. Obecne API nie pozwala na rozszerzenie do modyfikowania globalnego CSS ... więc będziemy musieli poczekać lub ręcznie wkleić CSS do narzędzi programistycznych, takich jak jaskiniowiec.
Ray Foss

Odpowiedzi:


47

Plik, którego szukasz, jest,

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

w systemie Windows i wyszukaj nazwę pliku, dark_vs.jsonaby zlokalizować go w dowolnym innym systemie.


Aktualizacja:

Dzięki nowym wersjom VSCode nie musisz szukać pliku ustawień, aby dostosować motyw. Teraz możesz dostosować motyw kolorów za pomocą ustawień użytkownika workbench.colorCustomizationsi editor.tokenColorCustomizations. Dokumentację w tej sprawie można znaleźć tutaj .


11
W Linuksie jest to/usr/share/code/resources/app/extensions/theme-defaults/themes
sigalor

1
W Arch Linux jest to (wydanie open source) w/usr/lib/code/extensions/theme-defaults/themes
hendalst

3
Domyślnie VS Code jest instalowany w C: \ users \ {nazwa użytkownika} \ AppData \ Local \ Programs \ Microsoft VS Code
Toivo Säwén

2
Aktualizacja tej odpowiedzi to rozsądna rekomendacja. Zauważyłem, że jeśli edytujesz pliki motywów bezpośrednio, mogą / zostaną nadpisane po aktualizacji VS Code.
cniggeler

73

W kodzie VS `` Ustawienia użytkownika '' możesz edytować widoczne kolory za pomocą następujących tagów (to jest próbka i jest znacznie więcej tagów),

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

Jeśli chcesz edytować niektóre tokeny kolorów w C ++, użyj następującego tagu,

"editor.tokenColorCustomizations": {
    "numbers": "#2247EB",
    "comments": "#6D929C",
    "functions": "#0D7C28"
}

1
Ale jeśli wykracza poza tokenColorCustomizations, co mam zrobić?
Alex

Gdzie można znaleźć listę wszystkich dostępnych opcji w „editor.tokenColorCustomizations”?
ololobus


Moja edycja została odrzucona z jakiegoś powodu, ale aby ta odpowiedź dotyczyła konkretnie chęci zmiany określonego motywu przez OP, możesz określić motyw i zmodyfikować kolory bez zmiany plików motywu: "workbench.colorCustomizations": {"[Kimbie Dark]" : {"activityBar.foreground": "# 472c0c"}}
aamarks

W ustawieniach nazywa się „Środowisko pracy: Dostosowywanie kolorów”
Zach Saucier

29

Jeśli chodzi o motywy, VS Code jest tak samo edytowalny jak Sublime. Możesz edytować dowolne domyślne motywy, które są dostarczane z kodem VS. Musisz tylko wiedzieć, gdzie znaleźć pliki motywów.

Uwaga dodatkowa: uwielbiam motyw Monokai. Jednak wszystko, co chciałem zmienić, to tło. Nie podoba mi się ciemnoszare tło. Zamiast tego myślę, że kontrast jest DUŻO lepszy na jednolitym czarnym tle. Kod wyskakuje znacznie więcej.

W każdym razie szukałem pliku motywu i znalazłem go (w systemie Windows) pod adresem:

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

W tym folderze znalazłem plik Monokai.tmTheme i zmodyfikowałem pierwszy klucz tła w następujący sposób:

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

W pliku motywu znajduje się kilka kluczy „tła”, upewnij się, że edytujesz właściwy. Ten, który edytowałem, był na samej górze. Myślę, że wiersz 12.


5
Lokalizacje instalacji Ubuntu są takie jak/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_vs.json
Max

5
A dla Maca okazało się, że aktualizacja plików w tych ścieżkach zadziałała: /Users/user-name/.vscode/extensions/azemoh.one-monokai-0.3.3/themes/OneMonokai-color-theme.jsoncmd + shift + p i wpisz reload windowcmd, aby natychmiast wypróbować zmianę :)
balajikris

1
Modyfikację tła motywu można również wykonać w "workbench.colorCustomizations": { "[Theme You Want to Update]": { "editor.background": "#000000" }ustawieniach użytkownika.
Bilbo,

1
W przypadku 64-bitowego programu VS Code w systemie Windows po ścieżce podstawowej C:\Program Files\Microsoft VS Code\resources\app\extensions\ zwykle następujetheme-....
Peter B

Zmodyfikuj motyw w ustawieniach użytkownika za pomocą "workbench.colorCustomizations": { "editor.background": "#000" },. Oto wszystkie różne dostosowania, które możesz wprowadzić: code.visualstudio.com/api/references/theme-color
Jeremy Moritz

17

Nie możesz „edytować” domyślnego motywu, są one „zablokowane”

Możesz jednak skopiować go do własnego motywu niestandardowego, wprowadzając dokładnie takie modyfikacje, jakie chcesz.

Więcej informacji można znaleźć w tych artykułach: https://code.visualstudio.com/Docs/customization/themes https://code.visualstudio.com/docs/extensions/install-extension#_your-extensions-folder

Jeśli wszystko, co chcesz zmienić, to kolory dla kodu C ++, powinieneś przyjrzeć się nadpisaniu kolorizatora obsługującego c ++. Aby uzyskać informacje na ten temat, przejdź tutaj: https://code.visualstudio.com/docs/customization/colorizer

EDYCJA: ciemny motyw znajduje się tutaj: https://github.com/Microsoft/vscode/tree/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults

EDYCJA2: Wyjaśnienie:


1
Skąd mogę to skopiować? W artykułach, które mi wysłałeś, nie ma o tym nic. I nie chcę niczego instalować w tak trywialnej rzeczy, jak zmiana podświetlenia składni - zwłaszcza gdy mogłem po prostu otworzyć odpowiedni plik i zmodyfikować kilka linii kodu, jeśli domyślny motyw nie był zablokowany. Poza tym do wygenerowania nowego motywu za pomocą Yeoman Generator potrzebny jest plik .tmTheme innego motywu - nie ma ciemnego motywu Visual Studio na stronie ColorSublime i nie mam dostępu do „zablokowanego” z VSC.
Toreno96

Może mógłbym edytować plik c ++. Plist z „C: \ Program Files (x86) \ Microsoft VS Code \ resources \ app \ extensions \ cpp”? Ale które bloki kodu powinienem zmienić? A może jest gdzieś plik źródłowy domyślnego ciemnego motywu VSC, którego mógłbym użyć do stworzenia własnego niestandardowego motywu?
Toreno96

Nie możesz go edytować, ponieważ uważam, że jest zapisany w kodzie źródłowym. Możesz jednak skopiować / wkleić go i zmienić kilka linii. Znajduje się na GitHub. Znalazłem to dla Ciebie: github.com/Microsoft/vscode/tree/ ... Edytowana odpowiedź z linkiem
Tobiah Zarlez

Możliwa jest edycja wspomnianego przeze mnie pliku c ++ .plist, sprawdziłem to. Z artykułu o kolorystach zrozumiałem, że jest to standardowy plik kolorizatora dla języka C ++. Popraw mnie, jeśli się mylę. Ale jeśli nadal mówisz o edycji domyślnego motywu - tak, wiem, że nie mogę tego zrobić, zrozumiałem zdanie na ten temat z Twojej pierwszej odpowiedzi. Dzięki za informacje o kodzie źródłowym na GitHubie i linku - ale sprawdziłem i stamtąd motywy nie są domyślne, tylko zmodyfikowane, bardziej kolorowe ich odmiany. Niestety nie w taki sposób, w jaki bym chciał.
Toreno96

1
Ale przez przypadek dowiedziałem się, że motyw „Xcodedefault” z galerii rozszerzeń ma taką samą składnię podświetlającą, jak domyślny ciemny. Ponieważ znajduje się teraz w folderze rozszerzeń na moim dysku, po instalacji mogę go zmodyfikować, tak jak chciałem zmodyfikować domyślny ciemny motyw. Więc mój problem został rozwiązany.
Toreno96

15

Najprostszym sposobem jest edycja ustawień użytkownika i dostosowanie workbench.colorCustomizations

Edycja dostosowań kolorów

Jeśli chcesz stworzyć swój motyw

Istnieje również opcja zmodyfikowania bieżącego motywu, która skopiuje aktualne ustawienia motywu i pozwoli zapisać go jako *.color-theme.jsonplik JSON5

Wygeneruj motyw kolorystyczny na podstawie bieżących ustawień


1
Masz ochotę zmienić kolejność odpowiedzi, aby lepsza i łatwiejsza odpowiedź była pierwsza? =]
Relequestual

14

Dowolny motyw kolorystyczny można zmienić w tej sekcji ustawień w programie VS Code w wersji 1.12 lub nowszej:

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

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

Dostępne wartości do edycji: https://code.visualstudio.com/docs/getstarted/theme-color-reference

EDYCJA: Aby zmienić kolory składni, zobacz tutaj: https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_syntax-highlighting-colors i tutaj: https://www.sublimetext.com/docs/ 3 / scope_naming.html


Dzięki temu możesz nadpisać kolory samego edytora, ale nie kolory niektórych słów kluczowych (np. Kolor ciągów znaków).
Jhegs

6

Jak powiedzieli inni, musisz zmienić ustawienie editor.tokenColorCustomizationslub workbench.colorCustomizationsw pliku settings.json. Tutaj możesz wybrać motyw podstawowy, taki jak Otchłań, i nadpisać tylko te rzeczy, które chcesz zmienić. Możesz bardzo łatwo zmienić kilka rzeczy, takich jak funkcja, kolory łańcuchów itp.

Np. Dla workbench.colorCustomizations

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

Np. Dla editor.tokenColorCustomizations:

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

Jednak głębokie dostosowania, takie jak zmiana koloru varsłowa kluczowego, będą wymagać podania wartości zastępczych pod textMateRuleskluczem.

Np. Poniżej:

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

Możesz również nadpisać globalnie dla różnych motywów:

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

Więcej szczegółów tutaj: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide


5

Rozwiązanie dla MAC OS

Nie jestem pewien, czy ta odpowiedź tutaj pasuje, ale chciałbym podzielić się rozwiązaniem dla użytkowników MAC i wygląda to niezręcznie, jeśli zacznę nowe pytanie i tam odpowiem sobie.


poszukaj ścieżki motywu VSCode, jak poniżej:

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

otwórz plik .json i poszukaj, aby zmienić docelowe style.
Na moim przypadku, chcę zmienić spacje renderowania koloru
i znalazłem to jak
"editorWhitespace.foreground"
tak pod settings.jsonVisual Studio Code,
dodałem następujące linie (zrobić w ustawieniach Workspace),

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

Rozwiązania z: https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme


Nie zapomnij ⌘ Command+ Szapisać ustawień, aby odniosły skutek.


2

W docs mają teraz cały rozdział na ten temat.

Zasadniczo użyj, npmaby zainstalować yoi uruchomić polecenie, yo codea otrzymasz mały kreator tekstowy - jedną z opcji będzie utworzenie i edycja kopii domyślnego schematu ciemnego.


1

Przyjechałem tutaj, aby znaleźć sposób na edycję motywu, ale nie mogłem go znaleźć na moim Macu. Po głębokim nurkowaniu w końcu znalazłem miejsce instalacji:

~/.vscode/extensions

Tam są wszystkie rozszerzenia!


ta odpowiedź jest dobra, została niesprawiedliwie przegłosowana.
Polymerase,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.