CODEWITHSUNDEEP
visual-studio-codethemes
ali_he96
ali_he96

Reputation: 285

How can I create my own theme for vs code?

How can I create my own theme for vs code? change color & syntax colors?

Upvotes: 9

Views: 13141

Answers (2)

behkod
behkod

Reputation: 2777

Using this service would help a lot to visualize what is what & where!:

https://themes.vscode.one/

Upvotes: 7

Nicky McCurdy
Nicky McCurdy

Reputation: 19573

Once you have tweaked your theme colors using workbench.colorCustomizations and editor.tokenColorCustomizations, it's time to create the actual theme.

  1. Generate a theme file using the Developer: Generate Color Theme from Current Settings command from the Command Palette

  2. Use VS Code's Yeoman extension generator to generate a new theme extension:

    bash npm install -g yo generator-code yo code

  3. If you customized a theme as described above, select 'Start fresh'.

  4. Copy the theme file generated from your settings to the new extension.

You can also use an existing TextMate theme by telling the extension generator to import a TextMate theme file (.tmTheme) and package it for use in VS Code. Alternatively, if you have already downloaded the theme, replace the tokenColors section with a link to the .tmTheme file to use.

{
  "type": "dark",
  "colors": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "editorIndentGuide.background": "#404040",
    "editorRuler.foreground": "#333333",
    "activityBarBadge.background": "#007acc",
    "sideBarTitle.foreground": "#bbbbbb"
  },
  "tokenColors": "./Diner.tmTheme"
}

Tip: Give your color definition file the -color-theme.json suffix and you will get hovers, code completion, color decorators, and color pickers when editing.

Source: Create a new Color Theme

Upvotes: 7

Related Questions