{"id":37,"date":"2018-04-07T14:58:00","date_gmt":"2018-04-07T14:58:00","guid":{"rendered":"http:\/\/blog.livierickson.com\/?p=37"},"modified":"2023-08-31T21:44:44","modified_gmt":"2023-08-31T21:44:44","slug":"create-your-own-color-theme-for-visual-studio-code","status":"publish","type":"post","link":"https:\/\/liverickson.com\/blog\/?p=37","title":{"rendered":"Create your own Color Theme for Visual Studio Code"},"content":{"rendered":"\n

It\u2019s been a while since I\u2019ve had a chance to get a new blog post up \u2013 I\u2019ve been working my way slowly but surely through my list of 27 goals for the year, and I finally got around to one that I\u2019ve been hoping to do for a while \u2013 creating my own Visual Studio Code editor theme! I wanted a dark color theme with simple syntax highlighting for writing JavaScript code, and I am thrilled with the results! As I was going through the documentation, I had a hard time finding a good set of instructions outside of the official reference pages, so I decided to write down what my process was and am excited to share that today!<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

The finished color theme!<\/em><\/p>\n\n\n\n

Visual Studio Code has a workspace file that you can customize with your own settings for your editor and project preferences, which is the primary mechanic for customizing your own color theme. In the `workbench` settings, you can pick and choose different colors to use for each component of the editor, which I\u2019ll break down further in this post If you look at the Microsoft theme color reference documentation<\/a> for VS Code, it can be overwhelming (I certainly found it to be!) so I\u2019ve also included a list of what I customized below, which hit the main areas for my desired changes.<\/p>\n\n\n\n

The first thing that I did was figure out what kind of color theme I wanted to do \u2013 which involved picking out colors! I knew that I wanted to keep my dark color theme as the base, so one of my first decisions involved finding the accent colors that I would use for my editor bars and ultimately, the syntax highlighting.<\/p>\n\n\n\n

Whenever I have to choose colors for a project, I turn immediately to Paletton<\/a>, an online site that provides a really handy UI for picking out complementary color sets. It\u2019s been a huge help for me in terms of choosing themes and various accent shades\/highlights, and gives you a variety of different methods for choosing your colors.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

The color theme that I landed on.<\/em><\/p>\n\n\n\n

I chose a central color magenta shade from Paletton as my base, but ended up primarily using the purple shades for my editor window and the magenta\/coral shades for syntax highlighting. I chose to use the option to generate adjacent complements, but you can also specify three opposites colors, four, or single colors with shading.<\/p>\n\n\n\n

When you click on different colors in the window, you can get more details (including color formats) for each color in your palette:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

To start modifying your workbench settings in VS Code, open up Code and click File > Preferences > Settings<\/em>. You will see your editor open up two windows in a side-by-side split view \u2013 the changes that you make will be on the right of these two editors. The left-hand side is a reference to the default workbench settings.<\/p>\n\n\n\n

The settings file in VS Code is JSON formatted, so to update your user settings, you add in the new customizations that you want in the `workbench.colorCustomizations` object that you can append to your user settings file. There\u2019s a lot to get through if you\u2019re going directly from the color theme reference, but the good news is that you don\u2019t have to edit all of the defaults to get a theme that you can make your own! I changed the following defaults to create my theme:<\/p>\n\n\n\n

Workbench Setting<\/strong><\/td>Description<\/strong><\/td><\/tr>
editor.foreground<\/td>The default foreground color in the editor, often used for text<\/td><\/tr>
activityBar.background (1)<\/td>The background color of the activity bar on the left-hand side of the VS Code editor<\/td><\/tr>
activityBar.foreground (2)<\/td>The foreground color of the activity bar on the left-hand side of the VS Code editor<\/td><\/tr>
sideBarSectionHeader.background (3)<\/td>The background color of the headers (usually used for folders) on the sidebar of VS Code. This can be shown or hidden, so you may not immediately see changes after modifying this value.<\/td><\/tr>
Button.background (4)<\/td>The background color for buttons.<\/td><\/tr>
list.activeSelectionBackground (5)<\/td>The background of an item in the sidebar list when it is selected and active<\/td><\/tr>
list.hoverBackground<\/td>The background of an item in the sidebar list when it is hovered over<\/td><\/tr>
input.border<\/td>The border of input text fields<\/td><\/tr>
inputOption.activeBorder<\/td>The border of activated items in input fields<\/td><\/tr>
focusBorder<\/td>The color of the border around any focused item<\/td><\/tr>
editor.selectionBackground<\/td>The background of selected text in the editor<\/td><\/tr>
editor.selectionHighlightBackground<\/td>The background of items that match what you have selected in the editor<\/td><\/tr>
scrollBarSlider.activeBackground<\/td>The color of the scroll bar when being used<\/td><\/tr>
scrollBarSlider.hoverBackground<\/td>The color of the scroll bar when the mouse is hovered over it<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

In code:<\/p>\n\n\n\n

\"workbench.colorCustomizations\": {\n        \"editor.foreground\": \"#EDE1E8\",\n        \"activityBar.background\" : \"#452A54\",\n        \"activityBar.foreground\": \"#FEE5F3\",\n        \"sideBarSectionHeader.background\": \"#79588B\",\n        \"button.background\": \"#452A54\",\n        \"list.activeSelectionBackground\" : \"#642F4D\",\n        \"list.hoverBackground\" : \"#642F4D33\",\n        \"input.border\" : \"#452A54\",\n        \"inputOption.activeBorder\" : \"#79588B\",\n        \"focusBorder\": \"#79588B\",\n        \"editor.selectionBackground\" : \"#642F4D\",\n        \"editor.selectionHighlightBackground\" : \"#642F4D4D\",\n        \"scrollbarSlider.activeBackground\" :  \"#452A54\",\n        \"scrollbarSlider.hoverBackground\": \"#452A5499\"\n }<\/pre>\n\n\n\n
If you\u2019re just looking to make changes to the editor windows, then you could choose to stop here and enjoy the new look and feel you have for your workspace! I wanted to make updates to the syntax styles, which involves generating a full .tmTheme file and updating the token settings for my palette. This was a multi-step process, which I\u2019ve outlined below:<\/p>\n\n\n\n
    \n
  1. If you don\u2019t already have it, install NPM<\/a> and open up the Node.js command prompt after installation completes.<\/li>\n\n\n\n
  2. In Visual Studio Code, hit View > Command Palette and type in \u2018Developer: Generate Color Theme From Current Settings\u2019. You will see a new file open up \u2013 save this someplace that you will remember easily.<\/li>\n\n\n\n
  3. Back in your NPM command prompt, type in `npm install -g yo generator-code`, wait for the installation to complete, then type `yo code` to open up the VS Code extension tool.<\/li>\n\n\n\n
  4. Select \u2018New Color Theme\u2019 then \u2018Start Fresh\u2019 from the options presented in the extension tool and follow the prompts. Your publisher ID should be all lower-case. The base theme (dark \/ light \/ high contrast) will help categorize your theme and set defaults that you haven\u2019t modified in your custom settings.<\/li>\n\n\n\n
  5. After you generate your empty theme, open up your folder for your extension by typing `cd <extension identifier>`, hitting enter, and then typing `explorer .`<\/li>\n\n\n\n
  6. Open up the \/themes\/ directory and copy the generated file from Visual Studio Code into the directory that was packaged for your extension. Delete the generated JSON.<\/li>\n\n\n\n
  7. If you have a tmTheme file that you want to use for syntax highlighting, you can set this by opening up your theme file and editing the `tokenColors` variable to point to that file. I saved mine into the same theme directory.<\/li>\n<\/ol>\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n
    The tokens <\/em>refer to the types of words that code files contain and can get complex quickly. Microsoft recommends looking at Color Sublime <\/a>to find some options, but you can definitely define your own right in the theme file if that\u2019s your jam! I picked up Tricolor<\/a>, since I was looking for something basic, and made edits to the colors in that file rather than trying to sort through the tokens individually. You can edit your .tmTheme tokens in a text editor \u2013 including VS Code!<\/p>\n\n\n\n
    I was originally inspired to create my own color theme by Amy over at BubbleSort<\/a>. If you\u2019ve made your own, share them here \u2013 I would love to see how you\u2019re expressing yourself through your editor of choosing!<\/p>\n","protected":false},"excerpt":{"rendered":"
    It\u2019s been a while since I\u2019ve had a chance to get a new blog post up \u2013 I\u2019ve been working my way slowly but surely through my list of 27 goals for the year, and I finally got around to one that I\u2019ve been hoping to do for a while \u2013 creating my own Visual Studio Code editor theme! I wanted a dark color theme with simple syntax highlighting for writing JavaScript code, and I<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":0,"activitypub_interaction_policy_quote":"","activitypub_status":"","footnotes":""},"categories":[3],"tags":[],"class_list":["post-37","post","type-post","status-publish","format-standard","hentry","category-development"],"_links":{"self":[{"href":"https:\/\/liverickson.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liverickson.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liverickson.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liverickson.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/liverickson.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=37"}],"version-history":[{"count":1,"href":"https:\/\/liverickson.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/37\/revisions"}],"predecessor-version":[{"id":291,"href":"https:\/\/liverickson.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/37\/revisions\/291"}],"wp:attachment":[{"href":"https:\/\/liverickson.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liverickson.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/liverickson.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}