How can I create my own theme for vs code?

Question

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

Answer 1

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

Answer 2

You can create your own theme or customize a specific theme to your preferred style by following the official documentation from VS Code VS Code Theme Doc