CODEWITHSUNDEEP
themesvisual-studio-code
Toreno96
Toreno96

Reputation: 1721

How to edit default dark theme for Visual Studio Code?

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?

Upvotes: 148

Views: 247149

Answers (15)

Varun Achar
Varun Achar

Reputation: 15119

Read if you want do to deep customisations

As others have stated, you must 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 easily things like the function, string colours, etc. However, you'll be limited to only a few items.

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.

Deep customisations like changing 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

Upvotes: 28

Burak Karadeniz
Burak Karadeniz

Reputation: 11

In order to make sure this settings work, you also need to select your current theme in the tokenColorCustomizations otherwise you might get an error as "overrides colors from the currently selected color theme"

  "editor.tokenColorCustomizations": {
        "[Default Dark+]": {
            
        },      
    },
    "workbench.colorCustomizations": {
        "editor.selectionBackground": "#0698b9",
        "editor.selectionHighlightBackground": "#0b5768",
        "editor.findMatchBorder":"#ff0000"
    },

vscodethemesettings

Upvotes: 1

Chethaka Uduwarage
Chethaka Uduwarage

Reputation: 1735

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

Upvotes: 140

Skilled Knight
Skilled Knight

Reputation: 19

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

Upvotes: 1

Mikhail
Mikhail

Reputation: 21809

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

Upvotes: 0

NJENGAH
NJENGAH

Reputation: 1277

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 :

enter image description here

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

Upvotes: 3

Alissa H
Alissa H

Reputation: 510

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

  1. Switch to the builtin theme you wish to modify by selecting Preferences: Color Theme from the command palette then choosing the theme.

  2. 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.

  3. 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"
    }
},

Upvotes: 21

Code Knox
Code Knox

Reputation: 1265

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!

Upvotes: 2

paarandika
paarandika

Reputation: 1439

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.

Upvotes: 87

elliotching
elliotching

Reputation: 1102

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.

Upvotes: 10

Jay Wick
Jay Wick

Reputation: 13787

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

Editing color customizations

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

Generate color theme from current settings

Upvotes: 18

needfulthing
needfulthing

Reputation: 1096

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

Upvotes: 14

Lee Goddard
Lee Goddard

Reputation: 11183

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.

Upvotes: 2

user7347625
user7347625

Reputation:

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.

Upvotes: 30

Avin Zarlez
Avin Zarlez

Reputation: 1682

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:

Upvotes: 18

Related Questions