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

Question 1

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 ++?

Question 2

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 .

Question 3

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

Question 4

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.

Question 5

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:

pobierz ten plik: https://github.com/Microsoft/vscode/blob/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults/themes/dark_plus.tmTheme
Modyfikuj, jak chcesz
Wygeneruj motyw za pomocą Yo Code https://code.visualstudio.com/docs/tools/yocode
Skopiuj ten motyw do folderu rozszerzenia. Lub, jeśli chcesz się podzielić, opublikuj go na VS Code Marketplace.

Question 6

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

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

Question 7

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

Question 8

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

Question 9

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.

Question 10

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.

Question 11

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!