Visual Studio Code: Color Theme Customization
Anybody who spends much time in front of a computer knows that little things, like ergonomics, or responsiveness, or design, can really affect the quality of your digital experience. So as a newbie to software development, finding a preferable programming environment was high on my list of things to accomplish, ASAP.
After trying out Atom (slow, and a bit overwhelming at first), and Sublime (does the job, but it feels pedestrian) I was introduced to Visual Studio Code by a classmate. I immediately appreciated how it looked and functioned, so I downloaded it, and started using it. I have been a happy coder ever since.
Visual Studio Code is fast and responsive, even though it’s built on the same Node.js platform as Atom. I wonder why? (Maybe Bill Gates knows something the rest of us don’t?) Anyway, it’s also beautiful, and packs every possible feature you could want out of a modern text editor. Check it out for yourself.
Visual Studio Code is really popular
Since then, I’ve learned a few things about Visual Studio Code, as well as its competitors. Visual Studio Code is made by Microsoft (I had no idea), and it’s totally free. Atom on the other hand was developed by Github, so there’s a lot of geek support for it out there. It’s also free, developed by… who would have guessed… MIT. Sublime was developed by a former Google engineer, and it costs $70. So why haven’t I heard of Visual Studio Code before? I’m not sure, especially since it commands such popular support across the digital development landscape. It ranked as the #1 development environment in Stack Overflow’s 2018 developer survey:
I’m guessing many seasoned diehards are sticking to what they know, fair enough, but Visual Studio Code seems to be doing something right.
Color Themes
So enough about what else is out there. One of the nice features I most appreciate about Visual Studio Code is the ability to add one of hundreds of Color Themes to customize your interface.
You can find them at the Visual Studio Code Marketplace, along with extensions and add-ons of every conceivable type, for just about any purpose, language, or application, with more and more being created and distributed every day.
Not that the standard Color Theme that comes pre-installed with Visual Studio Code is unattractive, but it’s a bit generic if you ask me. Plus, I tend towards lighter color screen colors because I find the glare from dark screens to be overly distracting, especially when I’m trying to work. But, I eventually discovered one big disappointment over the next few days: in downloading and trying out over a hundred light Color Themes for Visual Studio Code, only a few had the bold text colors I wanted. For some reason, most light Color Themes are pretty bland and monotone, and the few that aren’t had other distracting or unattractive qualities. There are so many dark themes with gorgeous text color palettes, maybe because they’re trying to remind you of playing videos games? Well, that’s my theory.
Diving into Customization
So, I decided to do what any intrepid beginning techie would do. I decided to try creating a custom Visual Studio Code Color Theme, and share it with the Visual Studio Code community.
As you can see, I can also download, or customize Icon Themes too, but maybe some other time.
The instructions on the website are pretty straightforward so I dove right in. First, it says to head to my Settings Editor.
Ummm… This looks a bit daunting. It’s not like any settings menu I’ve ever encountered before.
It’s all just text, with no buttons and options and palettes, like I’m used to. Okay, don’t panic. What does the text say? Hey wait a minute, it looks like JavaScript. Those squiggly brackets kinda give it away, and specifically, these look like nested objects, or what would be called hashes in Ruby, which I’m currently knee-deep into. Okay, so they look like key/value pairs, with boolean, or numerical, or hexadecimal color values. Wow, just 2 months ago, this would have been nonsense to me, and now, I can hack my text editor. Cool!
As you can see above, my light colored theme is pretty boring. (It’s called Brackets Light Pro, and I mainly picked it because it has a neutral background, but the text colors are not really nice to look at day in and day out, even if they may be easy on the eyes.) I’m looking for something that I enjoy looking at, something colorful and fun, but where the colors make sense, like they’re telling a story, or clearly articulating an idea. After a lot of research, I settled on 2 possible approaches: a) select a light Color Theme, and change the text colors, or, b) select a dark Color Theme with nice text colors, and change the background colors. I’m thinking the first approach will be easier, since all I have to do is change some text colors. But that stuff about TextMate grammar rules is a big red flag, and do I have the time or patience to learn this?
Okay, let’s just monkey around a bit. After a bit of Googling, I find a snippet of text and try it out. The only way to learn sometimes is by breaking things, right?
And just like that, the Activity Bar is green. A bit more investigation brought me to a long list of Color Theme References.
Lots of Color Theme References.
And this kinda useless video.
Hexadecimal Colors
And then I found this amazing website for hexadecimal colors, HTML Color Codes.
Now to find out about how to access the text colors for the text editor in my Settings Editor. Eventually, I learn that syntax colors in the text editor are somehow connected to tokens, and that I can assign color values to these keys: “keywords”, “functions”, “types”, “variables”, “numbers”, “strings”, and “comments”. Okay. Looks promising.
I was able to change the color for various types of text in my text editor. I also managed to change the background color my my terminal window to the pale yellow color I wanted.
But try as I may, I was unable to completely alter the syntax colors that were rendering in my text editor. For example, I could never get these not so pretty green and tan text colors to change. I guess they’re not connected to one of the 7 tokens I mentioned above.
And then I learned why.
“In order to support syntax highlighting, your extension needs to register a TextMate grammar .tmLanguage for its language in its package.json file.” I have no idea how to go about doing that, so I think that means I need to switch to my second approach. I need to find a dark Color Theme with syntax text colors that I like, and change the background colors.
Going to the Dark Side
In my search for a nice dark Color Theme, I kept landing on one that I really liked called Dracula.
Isn’t it pretty? I appreciate the way the syntax colors are not only nice to look at at, but they make sense to me, witches and pumpkins and Frankensteins frolicking on Halloween, my favorite holiday. But the background color is too dark for me, as I explained before. Otherwise, it’s practically perfect. Okay, time to tinker.
Eventually, I got my yellow terminal, and I played around with status bar colors, title bar colors, tab colors, and on and on.
I second guessed myself and tried refactoring some of the Dracula Color Theme background colors into Bracket Lite Pro, just to see what I could accomplish, but it confirmed for me that I need to embrace my dark side, lightened up just a little bit, to make my eyes happy.
I also realized that I couldn’t go too light with my background colors, or the text wouldn’t be very legible.
Also, there are numerous key/value pairs associated with hovering colors, click colors, transparencies, foreground colors changing, and on and on.
Make no mistake, the amount of control is amazing. But the team that developed my new favorite Color Theme, Dracula, are 13 people who have spent a bit more than a few evenings learning the ins and outs of what they’re doing.
And here I am trying to make a cool, custom Visual Studio Code Color Theme, or at least hack one that I like. There’s a lot of complexity under the hood, but hey, I’m just getting started.
Using my Digital Color Meter, which comes standard on Apple OSX, I found background colors that maintained the integrity of the Dracula Visual Studio Code Color Theme, while being light enough not to create screen glare. I also realized that the original background colors that come with the Dracula Color Theme have a bit of a greenish cast which I grew to dislike. Personally, I think a purplish cast is a lot prettier, and fits better with the theme. Eventually, after lots of experimenting, I found a nice balance of hexadecimal color values for all of the backgrounds and tabs on the screen. I also changed some text and button colors to personalize my theme even more, like those yellow buttons on the left, and the blood red title bar text.
Dracula: The Witching Hour
And… Voila!
It may not look like much, and to a casual observer, it may not look very different from the original Dracula Color Theme I started with.
But little differences can mean a lot, as I have learned playing with screen colors over the past few days. My new background is about 15% to 20% lighter than the original, with minimal screen glare. I think overall, my screen has more depth too.
So, if you’re not completely happy with your text editor, or how it looks, maybe a customized Visual Studio Code Color Theme is what you need. It’s also great practice for dealing with a JSON object, and learning about hexadecimal colors. And you’ll end up with a sweet looking text editor that no one else has, until you’re ready to share yours.
I still haven’t figured out how to upload my tweak on the Dracula Visual Studio Code Color Theme. Apparently, I need to learn how to use an Extension Generator, and I need to import a TextMate theme file and package it for use in VS Code. Publishing a theme to the Extension Marketplace, also requires that I get a Personal Access Token, which is a bit more than I am ready for just yet. To be honest, I’m still test-driving my new creation, and I have a feeling I’ll be tinkering with it a bit more before I’m ready to go public with it. But I already have a name for it when I am, Dracula: The Witching Hour. Stay tuned…
