How to add theme in Visual Studio Code? - color-scheme

Question

I recently downloaded the VS code editor which is really nice.
but the only problem I find in it is the color theme, I am use to
monokai color theme like in sublime text and I can't find a way to edit
the color theme or download a color theme there are only 2 options:
Dark Theme
Light Theme
How can I add my own theme or duplicate existing one so I will be able to
edit the color scheme as I want to?
I manage to change some of the colors in the following file but still
I don`t know how to add completely new theme:
resources/app/client/vs/monaco/ui/workbench/native/native.main.css
Looks like color themes will be available soon and it will be a part of a plugin system
visual-studio-code/suggestions/7756227-theme

Answer 1

Visual Studio Code 0.9.0 and later
There's an official documentation on how to add a custom theme.
You need a .tmtheme file for the theme you want to add. You can find existing files e.g. on GitHub, ColorSublime or you can define your own theme file (for example with tmTheme-Editor).
After finding a .tmtheme file you have two ways to create an extension based on it.
Using a Yeoman generator:
Install node.js (if you haven't already done)
Install yo (if you haven't already done) by executing npm install -g yo
Install the Yo generator for code: npm install -g generator-code
Run yo code and select New Color Theme
Follow the instructions (define the .tmTheme file, theme name, ui theme etc.)
The generator creates a directory for your extension with the name of the theme in your current working directory.
Create the directory on your own:
Create a directory with the name of your plugin (only lowercase letters). Let's say we call it mytheme.
Add a subfolder themes and place the .tmTheme file inside of it
Create a file package.json inside the root of the extension folder with content like this
{
"name": "theme-mytheme",
"version": "0.0.1",
"engines": {
"vscode": ">=0.9.0-pre.1"
},
"publisher": "me",
"contributes": {
"themes": [
{
"label": "My Theme",
"uiTheme": "vs-dark", // use "vs" to select the light UI theme
"path": "./themes/mytheme.tmTheme"
}
]
}
}
Finally add your extension to Visual Studio Code
Copy the extension folder to the extension directory. This is:
on Windows %USERPROFILE%\.vscode\extensions
on Mac/Linux $HOME/.vscode/extensions
Restart VSCode and select the new theme in File -> Preferences -> Color Theme
Visual Studio Code 0.8.0
It's possible to add new themes in Visual Studio Code 0.8.0 (released for insiders on 2015-08-31 become an insider).
After installing VSCode 0.8.0 or higher do this to apply your own theme:
Download a .tmTheme file or create your own (for example with tmTheme-Editor)
Copy the .tmTheme file to %CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/themes
Register the .tmTheme file in %CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/ticino.plugin.json by adding an entry for it like this:
{
"id": "vs-theme-mynewtheme", // internal ID
"label": "MyNewTheme", // displayed name for the theme
"uiTheme": "vs-dark", // general UI appeareance (
// "vs" for light themes,
// "vs-dark" for dark themes)
"path": "./themes/myNewTheme.tmTheme" // file path
},
Restart VSCode and select the new theme in File -> Preferences -> Color Theme

Answer 2

Adding a completely new theme is not currently supported.
You can submit your feature requests here, I already heard people asking for this https://visualstudio.uservoice.com/forums/293070-visual-studio-code

Answer 3

I found that the file - resources/app/client/vs/monaco/ui/workbench/native/native.main.css - is also the right place for changing how fonts are renderer. I was trying to figure out how to disable font smoothing on OS X and found that you can do it here by adding this CSS rule in the file -
.monaco-editor {
-webkit-font-smoothing: none;
}