Как отредактировать темную тему по умолчанию для кода Visual Studio?


88

Я использую 64-битную Windows 7.

Есть ли способ отредактировать темную тему по умолчанию в коде Visual Studio? В %USERPROFILE%\.vscodeпапке есть только темы из расширений, а в пути установки (я использовал default C:\Program Files (x86)\Microsoft VS Code) есть файлы некоторых стандартных тем \resources\app\extensions, таких как Kimbie Dark, Solarized Dark / Light или варианты Monokai, но темной темы по умолчанию нет.

Но если все-таки есть возможность его редактировать, то какие блоки кода отвечают за цвет члена объекта, члена указателя и имени класса и структуры на языке C ++?


4
Для всех, кто приходит сюда: вам не нужно искать, изменять или создавать какие-либо файлы темы. Все можно изменить с помощью workbench.colorCustomizationsи editor.tokenColorCustomizationsв пользовательских настройках: code.visualstudio.com/docs/getstarted/… .
chipit24

Можно также продержаться за устаревание, но мы работаем над функцией, которая позволила бы нам добавить настраиваемый глобальный CSS, например, Atoms Edit -> Stylesheet...последнее изменение проблемы было март github.com/Microsoft/vscode/issues/459 . К сожалению, он закрыт для комментариев. Текущий API не позволяет расширению изменять глобальный CSS ... поэтому нам придется подождать или вручную вставить CSS в инструменты разработчика, например, caveman.
Ray Foss

Ответы:


47

Файл, который вы ищете, находится в

Код Microsoft VS \ ресурсы \ приложение \ расширения \ темы по умолчанию \ темы

в Windows и найдите имя файла, dark_vs.jsonчтобы найти его в любой другой системе.


Обновить:

В новых версиях VSCode вам не нужно искать файл настроек, чтобы настроить тему. Теперь вы можете настроить цветовую тему с workbench.colorCustomizationsи editor.tokenColorCustomizationsпользовательскими настройками. Документацию по этому поводу можно найти здесь .


11
В Linux это/usr/share/code/resources/app/extensions/theme-defaults/themes
сигалор

1
В Arch Linux это (выпуск с открытым исходным кодом)/usr/lib/code/extensions/theme-defaults/themes
hendalst

3
По умолчанию VS Code устанавливается в C: \ users \ {username} \ AppData \ Local \ Programs \ Microsoft VS Code
Тойво Савен,

2
Обновление этого ответа - хорошая рекомендация. Я обнаружил, что если вы редактируете файлы темы напрямую, они могут / будут перезаписаны при обновлении VS Code.
cniggeler

73

В VS code 'User Settings' вы можете редактировать видимые цвета, используя следующие теги (это образец, и их гораздо больше),

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

1
Но если это выходит за рамки tokenColorCustomizations, что мне делать?
Alex

Где найти список всех доступных опций в "editor.tokenColorCustomizations"?
ololobus


Мое редактирование было отклонено по какой-то причине, но чтобы этот ответ был конкретно адресован желанию OP изменить конкретную тему, вы можете указать тему и изменить цвета, не изменяя файлы темы: "workbench.colorCustomizations": {"[Kimbie Dark]" : {"activityBar.foreground": "# 472c0c"}}
aamarks

В настройках он называется «Workbench: Color Customizations»
Зак Сосье

29

Что касается тем, 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, я думаю.


5
Места установки Ubuntu выглядят так/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_vs.json
Макс,

5
А для Mac я обнаружил, что обновление файлов по этим путям работает: /Users/user-name/.vscode/extensions/azemoh.one-monokai-0.3.3/themes/OneMonokai-color-theme.jsoncmd + shift + p и введите reload windowcmd, чтобы сразу же опробовать изменение :)
balajikris

1
Изменить фон темы также можно "workbench.colorCustomizations": { "[Theme You Want to Update]": { "editor.background": "#000000" }в пользовательских настройках.
Бильбо

1
Для 64-битного VS Code в Windows за базовым путем 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

РЕДАКТИРОВАТЬ2: Чтобы уточнить:


1
А откуда его скопировать? В присланных вами статьях об этом нет ничего. И я не хочу ничего устанавливать для такой тривиальной вещи, как небольшое изменение подсветки синтаксиса - особенно когда я мог просто открыть нужный файл и изменить несколько строк кода, если тема по умолчанию не была заблокирована. Кроме того, для создания новой темы с помощью Yeoman Generator требуется файл .tmTheme другой темы - на сайте ColorSublime нет темной темы Visual Studio, и у меня нет доступа к «заблокированной» из VSC.
Toreno96

Может быть, я мог бы отредактировать файл c ++. Plist из "C: \ Program Files (x86) \ Microsoft VS Code \ resources \ app \ extensions \ cpp"? Но какие блоки кода мне следует изменить? Или, может быть, где-то есть исходный файл темной темы VSC по умолчанию, который я мог бы использовать для создания своей собственной темы?
Toreno96

Вы не можете редактировать его, потому что я считаю, что он сохранен в исходном коде. Однако вы можете скопировать / вставить его и изменить пару строк. Он находится на GitHub. Я нашел это для вас: github.com/Microsoft/vscode/tree/… Отредактированный ответ со ссылкой
Tobiah Zarlez

Можно отредактировать упомянутый мной файл c ++. Plist, я это проверил. И из статьи о колоризаторах я понял, что это стандартный файл колоризатора для языка C ++. Поправьте меня если я ошибаюсь. Но если вы все еще говорите о редактировании темы по умолчанию - да, я знаю, что не могу этого сделать, я понял предложение об этом из вашего первого ответа. Спасибо за информацию об исходном коде на GitHub и ссылку - но я проверил, и темы оттуда не являются стандартными, а являются модифицированными, более красочными их вариациями. К сожалению, не так, как мне бы хотелось.
Toreno96

1
Но случайно я обнаружил, что тема "Xcodedefault" из галереи расширений имеет тот же синтаксис, что и темная тема по умолчанию. Поскольку теперь он находится в папке расширений на моем диске, после установки я могу изменить его, так же, как я хотел изменить темную тему по умолчанию. Итак, моя проблема решена.
Toreno96

15

Самый простой способ - отредактировать пользовательские настройки и настроить workbench.colorCustomizations

Редактирование настроек цвета

Если вы хотите сделать свою тему

Существует также возможность изменить текущую тему, которая скопирует текущие настройки темы и позволит вам сохранить их как *.color-theme.jsonфайл JSON5.

Создать цветовую тему из текущих настроек


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


При этом вы можете переопределить цвета самого редактора, но не цвета некоторых ключевых слов (например, цвет строк).
Jhegs

7

Как заявляли другие, вам необходимо переопределить параметр editor.tokenColorCustomizationsили workbench.colorCustomizationsв файле settings.json. Здесь вы можете выбрать базовую тему, например 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


5

Решение для MAC OS

Я не уверен, подходит ли этот ответ здесь, но я хотел бы поделиться решением для пользователей MAC, и будет неловко, если я начну новый вопрос и отвечу себе там.


найдите путь к своей теме VSCode примерно так:

..ваше_установка-расположение / 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сохранить настройки, чтобы они вступили в силу.


2

В документации теперь есть целый раздел об этом.

По сути, используйте npmдля установки yoи запустите команду, yo codeи вы получите небольшой текстовый мастер, одним из вариантов которого будет создание и редактирование копии темной схемы по умолчанию.


1

Я пришел сюда, чтобы найти способ отредактировать тему, но не смог найти его на своем Mac. После глубокого погружения я наконец нашел место для установки:

~/.vscode/extensions

Все расширения есть!


это хороший ответ, он был несправедливо отвергнут.
Polymerase
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.