| Order | Area | TOCTitle | ContentId | PageTitle | DateApproved | MetaDescription |
|---|---|---|---|---|---|---|
6 |
customization |
Themes |
CAC88BC7-90A5-4384-8A05-2187117C0F72 |
Visual Studio Code Themes |
4/14/2016 |
Changing the color theme in Visual Studio Code. You can use color themes provided by VS Code, the community or create your own new themes. TextMate .tmTheme files are supported. |
Color themes let you modify VS Code's background, text and language syntax colorization to suit your preferences and work environment. VS Code supports light, dark and high contrast themes.
There are several out-of-the-box color themes in VS Code for you to try.
- Open the Color Theme picker with File > Preferences > Color Theme.
- Use the cursor keys to preview the colors of the theme.
- Select the theme you want and hit
kbstyle(Enter).
Many themes have been uploaded to the VS Code Extension Marketplace by the community. If you find one you want to use, simply install it and restart VS Code and the new theme will be available.
Tip: To search for themes, type 'theme' in the
Extension: Install Extensiondropdown to filter on extensions with 'theme' in their name.
You can also browse the VS Code Marketplace site directly to find available themes.
You can also add new TextMate theme files (.tmTheme) to your VS Code installation using the yo code extension generator.
ColorSublime has hundreds of existing TextMate themes to choose from. Pick a theme you like and copy the Download link to use in the Yeoman generator. It will be in a format like "http://colorsublime.com/theme/download/(number)". The 'code' generator will prompt you for the URL or file location of the .tmTheme file, the theme name as well as other information for the theme.
Copy the generated theme folder to a new folder under your .vscode/extensions folder and restart VS Code.
Open the Color Theme picker theme with File > Preferences > Color Theme and you can see your theme in the dropdown. Arrow up and down to see a live preview of your theme.
If you'd like to share your new theme with the community, you can publish it to the Extension Marketplace. Use the vsce publishing tool to package your theme and publish it to the VS Code Marketplace.
Tip: To make it easy for users to find your theme, include the word "theme" in the extension description and set the
CategorytoThemein yourpackage.json.
We also have recommendations on how to make your extension look great on the VS Code Marketplace, see Marketplace Presentation Tips.
Themes are just one way to customize VS Code. If you'd like to learn more about VS Code extensibility, try these topics:
- Colorizers and Bracket Matchers - Learn how to import TextMate colorizers
- Snippets - Add additional snippets to your favorite language
- Extending Visual Studio Code - Learn about other ways to extend VS Code
Nothing yet