How to edit default dark theme for Visual Studio Code

Question

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

User · Answer

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    lt key gt background lt  key gt   lt string gt  000000 lt  string gt    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

User · Answer

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

User · Answer

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

User · Answer

In Ubuntu I found the theme at  snap code 55 usr share code resources app extensions theme-defaults themes dark plus json

User · Answer

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

User · Answer

tldr You can get the colors for any theme  including the builtin ones  by switching to the theme then choosing Developer  gt  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  gt  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  quot workbench colorCustomizations quot          quot  Default Dark   quot              quot editor background quot    quot  19191f quot            quot editor tokenColorCustomizations quot          quot  Default Dark   quot              quot comments quot    quot  5F6167 quot

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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 colourand 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   x2318  Command S save settings to take effect

User · Answer

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

[themes] How to edit default dark theme for Visual Studio Code?

Examples related to themes

Examples related to visual-studio-code