问题
I'm using Windows 7 64-bit.
Is there a way to edit default dark theme in the Visual Studio Code? In %USERPROFILE%\.vscode folder there are only themes from the extensions, while in installation path (I used default, C:\Program Files (x86)\Microsoft VS Code) there are files of some standard themes in \resources\app\extensions, like Kimbie Dark, Solarized Dark/Light or variants of Monokai, but there is no default dark theme.
But if after all there is a possibility to edit it, then which blocks of code are responsible for colour of member of object, member of pointer and name of class and structure in the C++ language?
回答1:
The file you are looking for is at,
Microsoft VS Code\resources\app\extensions\theme-defaults\themes
on Windows and search for file name dark_vs.json to locate it on any other system.
回答2:
In VS code 'User Settings', you can edit visible colours using the following tags(this is a sample and there are much more tags),
"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"}
If you want to edit some C++ color tokens, use the following tag,
"editor.tokenColorCustomizations": {
"numbers": "#2247EB",
"comments": "#6D929C",
"functions": "#0D7C28"
}
回答3:
As far as the themes, VS Code is every bit as editable as Sublime. You can edit any of the default themes that come with VS code. You just have to know where to find the theme files.
Side note: I love the Monokai theme. However, all I wanted to change about it was the background. I don't like the dark grayish background. Instead, I think the contrast is WAY better with a solid black background. The code pops out much more.
Anyways, I hunted for the theme file and found it (in windows) at:
c:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\theme-monokai\themes\
In that folder I found the Monokai.tmTheme file and modified the first background key as follows:
<key>background</key>
<string>#000000</string>
There are a few 'background' key in the theme file, make sure you edit the correct one. The one I edited was at the very top. Line 12 I think.
回答4:
You cannot "edit" a default theme, they are "locked in"
However, you can copy it into your own custom theme, with the exact modifications you'd like.
For more info, see these articles: https://code.visualstudio.com/Docs/customization/themes https://code.visualstudio.com/docs/extensions/install-extension#_your-extensions-folder
If all you want to change is the colors for C++ code, you should look at overwriting the c++ support colorizer. For info about that, go here: https://code.visualstudio.com/docs/customization/colorizer
EDIT: The dark theme is found here: https://github.com/Microsoft/vscode/tree/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults
EDIT2: To clarify:
- download this file: https://github.com/Microsoft/vscode/blob/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults/themes/dark_plus.tmTheme
- Modify however you like
- Generate a theme using Yo Code https://code.visualstudio.com/docs/tools/yocode
- Copy that theme into your extension folder. Or, if you feel like sharing, publish it on the VS Code marketplace.
回答5:
Any color theme can be changed in this settings section on VS Code version 1.12 or higher:
// Overrides colors from the currently selected color theme.
"workbench.colorCustomizations": {}
See https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme
Available values to edit: https://code.visualstudio.com/docs/getstarted/theme-color-reference
EDIT: To change syntax colors, see here: https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_syntax-highlighting-colors and here: https://www.sublimetext.com/docs/3/scope_naming.html
回答6:
The simplest way is to edit the user settings and customise workbench.colorCustomizations
If you want to make your theme
There is also the option modify the current theme which will copy the current theme settings and let you save it as a *.color-theme.json JSON5 file
回答7:
Solution for MAC OS
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.
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.
回答8:
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.
回答9:
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.
However, deep customisations like change the colour of the var keyword will require you to provide the override values under the textMateRules key.
E.g. below:
"editor.tokenColorCustomizations": {
"[Abyss]": {
"textMateRules": [
{
"scope": "keyword.operator",
"settings": {
"foreground": "#FFFFFF"
}
},
{
"scope": "keyword.var",
"settings": {
"foreground": "#2871bb",
"fontStyle": "bold"
}
}
]
}
}
You can also override globally across themes:
"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"
}
}
]
}
More details here: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide
来源：https://stackoverflow.com/questions/35165362/how-to-edit-default-dark-theme-for-visual-studio-code