Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add theme in Visual Studio Code?

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:

  1. Dark Theme
  2. 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

like image 506
talsibony Avatar asked May 03 '15 08:05

talsibony


People also ask

Where are VS Code themes installed?

The building blocks of a theme This place, in macOS, OSX or Linux is in the ~/. vscode/extensions directory while in Windows it should be in %USERPROFILE%\. vscode\extensions .

Can I customize VS Code theme?

You can customize your active Visual Studio Code color theme with the workbench. colorCustomizations user setting. Note: If you want to use an existing color theme, see Color Themes where you'll learn how to set the active color theme through the Preferences: Color Theme dropdown (Ctrl+K Ctrl+T).


1 Answers

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.

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

  1. Download a .tmTheme file or create your own (for example with tmTheme-Editor)

  2. Copy the .tmTheme file to %CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/themes

  3. 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  },   
  4. Restart VSCode and select the new theme in File -> Preferences -> Color Theme

like image 57
Wosi Avatar answered Sep 18 '22 22:09

Wosi