How to edit default dark theme for Visual Studio Code?

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

The file you are looking for is at,

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

on Windows and search for filename dark_vs.json to locate it on any other system.

Update:

With new versions of VSCode you don't need to hunt for the settings file to customize the theme. Now you can customize your color theme with the workbench.colorCustomizations and editor.tokenColorCustomizations user settings. Documentation on the matter can be found here.

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.

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.

The simplest way is to edit the user settings and customise workbench.colorCustomizations

https://i.stack.imgur.com/8h9tt.png

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

https://i.stack.imgur.com/CAj2o.png

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

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

tldr

You can get the colors for any theme (including the builtin ones) by switching to the theme then choosing Developer > Generate Color Theme From Current Settings from the command palette.

Details

Switch to the builtin theme you wish to modify by selecting Preferences: Color Theme from the command palette then choosing the theme. Get the colors for that theme by choosing Developer > Generate Color Theme From Current Settings from the command palette. Save the file with the suffix -color-theme.jsonc. The color-theme part will enable color picker widgets when editing the file and jsonc sets the filetype to JSON with comments. From the command palette choose Preferences: Open Settings (JSON) to open your settings.json file. Then add your desired changes to either the workbench.colorCustomizations or tokenColorCustomizations section. To restrict the settings to just this theme, use an associative arrays where the key is the theme name in brackets ([]) and the value is an associative array of settings. The theme name can be found in settings.json at workbench.colorTheme.

For example, the following customizes the theme listed as Dark+ (default dark) from the Color Theme list. It sets the editor background to near black and the syntax highlighting for comments to a dim gray.

// settings.json
"workbench.colorCustomizations": {
    "[Default Dark+]": {
        "editor.background": "#19191f"
    }
},
"editor.tokenColorCustomizations": {
    "[Default Dark+]": {
        "comments": "#5F6167"
    }
},

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.

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.

I came here to find a way to edit the theme, but could not find it on my Mac. After a deep dive, finally I found the install place:

~/.vscode/extensions

All extensions in there!

The latest version of VS code you can customize the colors to make it more personalized using the workbench as in the gif image below :

https://i.stack.imgur.com/GJlnD.gif

Go to Settings > Color Customization > Edit in settings.json

Add your color settings for using the editor.tokenColorCustomizations, for example to change the comments across all the default Dark++ theme, you can add this code :

"editor.tokenColorCustomizations":{
        "comments": "#fff000"
  }

ctrl+k+t if you want to switch from a dark theme to other theme

For customizing default dark theme, 

1 Click on the left bottom gear(Manage) on visual studio 
2 Select Settings
3 Type JSON in search settings, Click on Edit JSON Settings
4 Inside Workspace settings in the left columns, paste the following code.
5 Hover over each property and change the default # color value to the one             
  liked

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

In Ubuntu with VS Code installed as a snap package, I found the theme at /snap/code/55/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_plus.json