How to make a custom theme for your vscode

How to Create Your Own Custom VSCode Theme

Hey folks, how’s it going? Bruno Ciccarino here again, and today I'm going to show you how to create your own custom VSCode theme. If you're curious, the theme I used while writing this post is called sheep-themes, and you can check out the source code for it here if you want to use it as a base for your own project.

Here’s what the final version of the theme looks like:

Getting Started: How Do I Create a Theme from Scratch?

To create a theme for VSCode, there’s a handy tool called yo code, which generates the entire structure of a plugin or theme for you. Before we start, you need to have npm installed on your machine. I’ll assume you already have it, so I’ll skip that part.

1. In your terminal, run:

   npm install -g yo generator-code

Then run:

yo code

Follow the prompts, and yo code will create the structure you need to start building your own theme.

Once it's done, it will ask if you want to open your project in VSCode. Hit Enter, and VSCode will open with your new theme directory. The most important file for your theme is the theme.json. This is where you’ll define the colors and styles for your theme.

Main Components You Need to Customize:

Your theme.json will have some default values, but for full customization, you'll want to focus on these main components:

• Editor

  • editor.background: Background color of the editor
  • editor.foreground: Text color in the editor
  • editorGutter.background: Background of the gutter (where line numbers are shown)
  • editorGroupHeader.tabsBackground: Background of the tabs in the editor

• Activity Bar

  • activityBar.background: Background color of the activity bar (side with icons)
  • activityBarBadge.background: Background of the badges in the activity bar

• Side Bar

  • sideBar.background: Background of the side bar (where file explorer, etc. is shown)
  • sideBarTitle.foreground: Text color of the side bar titles

• Status Bar

  • statusBar.background: Background color of the status bar (bottom bar)
  • statusBar.border: Border color of the status bar
  • statusBar.debuggingBorder: Border color when debugging
  • statusBar.noFolderBorder: Border color when no folder is open

• List

  • list.inactiveSelectionBackground: Background color of selected, but inactive list items
  • list.activeSelectionBackground: Background color of active, selected list items
  • list.dropBackground: Background color when dragging and dropping items in a list

• Title Bar

  • titleBar.activeBackground: Background color of the title bar when a window is active
  • titleBar.inactiveBackground: Background color when the window is inactive

• Tabs

  • tab.activeBackground: Background color of active tabs
  • tab.inactiveBackground: Background color of inactive tabs

• Menu

  • menu.background: Background color of menus
  • menubar.selectionBackground: Background color when a menu item is selected in the menu bar

Final Thoughts

Once you've customized these key components, you’ll have your very own theme ready to go! If you liked the theme or found this guide helpful, don’t forget to leave a 5-star rating on the VSCode Marketplace—it really helps! Thanks for reading, and stay tuned for my future post where I'll explain how to publish your extension or theme on the Marketplace.