How to Create VsCode Theme

VS Code is popular code editor around developers. It has it's own marketplace so, you can easly customize your editor. Recently I developed my first VS Code theme and extension. I want to share with you how I did and how you can build your own. title2 What is theme? Themes are simply customized color palettes for editors. They define colors in json file so, you can download and use it on your editor. title2 What is required to get started? - VS Code - Node If you installed these programs, we can move to installing required packages. We have to install some packages to start with theme boilerplate. npm i -g yo generator-code Now we have VS Code extension generator. To start developing, run: yo code After running it, you should see something like this: image /images/how-to-create-vscode-theme/yo-code-screenshot-1.png alt yo-code-screenshot-1 Select **New Color Theme** and hit enter. In this tutorial we build our theme from scratch so, pick **No, start fresh** image /images/how-to-create-vscode-theme/yo-code-screenshot-2.png alt yo-code-screenshot-2 Answer the questions: image /images/how-to-create-vscode-theme/yo-code-screenshot-3.png alt yo-code-screenshot-3 Now yeoman should create a new folder named as your theme name. Open your theme folder with VS Code to get started. You should see this: image /images/how-to-create-vscode-theme/screenshot-4.png alt screenshot-4 Your will work with json file to edit theme. In the **colors** you can edit background, foreground and active colors. Just type something you want and it'll autofill for you. Inside the **tokenColors** as you can guess we'll work with syntax highlighting. You can edit colors for general or specific languages. Please take a look at the default code to understand it better. title2 How to see the theme in real time? In VS Code press f5 to run debug mode. You should see another VS Code with your theme. When you make changes it'll automaticly update itself. title2 How to find token names? VS Code give us token viewer tool. To run it type Ctrl+Shift+P and search for **Developer: Inspect Editor Tokens and Scopes**. After, just click the text you want to see. It'll show you what tokens it have. image /images/how-to-create-vscode-theme/screenshot-5.png alt screenshot-5 title2 How to change colors? With inspect editor find your token and search it inside theme json file. If you can't find it no worries you can easly add your own token. For this example I'll go with the public syntax. To find it I'll search for **storage.modifier**. You can also search it specific for php. image /images/how-to-create-vscode-theme/screenshot-6.png alt screenshot-6 To change the color just edit **foreground**. image /images/how-to-create-vscode-theme/screenshot-7.png alt screenshot-7 As you can see all **storage.modifier** tokens are changed. title2 Further more VS Code shared articles on their website about publishing your own theme. Visit VS Code's website to read more. Watch my video tutorial ☝