Personally, I think that writing code in a nice looking editor improves the programming experience

So today we are going to give you a review of VSCode theme plug-ins

Assessment dimensions

This article will evaluate VSCode theme plug-ins from the following three dimensions

1. Language coloring

A theme that can be colored based on language semantics can improve the experience of reading code, so this article will first evaluate the coloring ability of the theme

Due to a wide variety of languages and limited capabilities, I only selected three languages for testing, namely JavaScript, Java and Markdown

2. Select a prompt

In the sidebar to provide the selection of each control prompt, can facilitate the user to switch between the columns, which is easier to ignore in the theme design

The orange box in the image below gives you a good idea of where you are in the sidebar

3. Maintenance

The open nature of VSCode plug-ins makes for a mixture of good and bad

For example, many mods have already been “discarded “, but they still show up in various leaderboards and recommended articles due to the” Matthew effect”

For example, ONE of my favorite plug-ins, Bracket Pair Colorizer 2, has been downloaded 2,514,210 times by June 2021.6

But it’s been almost a year since its last update, and its Github repository has been set up for Archived 🙁

supplement

  • Since there are so many theme plugins in VSCode, I chose only popular themes

  • Because in my opinion theme plug-ins should provide an out-of-the-box experience, I didn’t include customizability in the measurement dimension

  • Test environment:

    • No language supports class plug-ins
    • Each topic is the latest version of 2021.5.5
    • Font: Fira Code
    • VSCode version: 1.55

All right, let’s start our theme fight!

Theme mayhem

The theme in

  • One Dark Pro

    The One Dark Pro theme is inspired by the iconic One Dark theme in Atom

    Its introduction is pretty straightforward: “one of the most downloaded themes in VSCode.”

    As of April, 2021.54, it has received 3,609,977 downloads

  • Dracula Official

    Speaking of dark colors, the famous Dracula theme is unavoidable, covering 181 apps. In VSCode, the theme is called dracula-official

    As of 2021.5.4, it has received 2,241,050 downloads

  • Bluloco Light Theme

    The Bluloco Light Theme is derived from the One Light Theme, which is characterized by the comprehensive use of syntactic scope and the overall consistency of color matching

    As of April 4, 2021.54, it has received 144,891 downloads

  • Eva Light(Eva Theme)

    Our final contestant, also a Light color, is Eva Light in the Eva Theme series, which positions itself as a code Theme full of semantic expression

    As of April, 2021.54, it has received 242,212 downloads

Ok, now that all theme plugins are in, let’s take a look at how they perform in each of the metrics

Language coloring

JavaScript

  • One Dark Pro

  • Dracula Official

  • Bluloco Light Theme

  • Eva Light(Eva Theme)

My opinion:

Just from the striking effect at first glance, I think Dracula Official wins, the color and contrast between the various semantic parts are very clear

However, when it comes to semantic richness in JavaScript, two-digit dark colors do a little worse than two-digit light colors. As you can see from the figure above, the two-digit dark colors don’t differentiate between the innerText property of the variable count and the constant BTN, as the two-digit light colors do

For the two Light color players, Eva Light(Eva Theme) changed the color of constant BTN inside the function from orange to gray and black, the same as the variable; The Bluloco Light Theme is consistent with purple

All in all, I think the Bluloco Light Theme wins for JavaScript coloring

Java

  • One Dark Pro

  • Dracula Official

  • Bluloco Light Theme

  • Eva Light(Eva Theme)

My opinion:

Surprisingly, the Bluloco Light Theme, which was the number one color for JavaScript, was the number one color for Java. There is no distinction between permission identifiers, data types, returns, and this, which is clearly substandard

As for Eva Light(Eva Theme), it has to be said that the author of the plug-in has a very unique understanding of the Light color system. While distinguishing clearly between various colors, the whole can form a consistent aesthetic feeling, which makes people praise

But is the semantic expression of language limited to color? The two dark color contestants gave different answers: in addition to coloring, they also introduced italics, a direct change in the font, which I personally think can better enhance the expression of visual meaning

Between the two Dark contestants, I personally prefer Dracula Official’s radical expression that data types, function parameter names and this are all italicized rather than One Dark Pro’s only italicized function parameter names

But Dracula’s lack of coloring of this attribute must be considered…

All told, I think the One Dark Pro wins the Race for Java coloring

Markdown

  • One Dark Pro

  • Dracula Official

  • Bluloco Light Theme

  • Eva Light(Eva Theme)

My opinion:

Technically, the semantics of Markdown are not complicated, but there were flaws in the coloring of two contestants. First, Dracula Official marked disorderly points without coloring distinction; The second is that Eva Light(Eva Theme) does not do color differentiation on the line code mark ‘ ‘. I personally don’t think this should happen

For the remaining two contestants, they added some minor details in addition to semantic coloring: One Dark Pro italicized the italic symbol *real*; The Bluloco Light Theme has the corresponding bold treatment for the marked content **markdown**. I think it is these small details that reflect the theme of the author’s heart

While the One Dark Pro and The Bluloco Light Theme have their own differences in semantic colouring, I found the Bluloco Light Theme’s use of bright red for bold content to be a bit obtrusive and to be a bit of a drag on the overall aesthetic

So in the Markdown coloring contest, I’m going to vote for the One Dark Pro

Select the prompt

Next comes the second big item of the evaluation, “check prompt “, and the test will be performed as shown in the following figure

The orange border in the sample clearly indicates where the focus is without looking out of place in the sidebar, which I personally find to be a pretty good implementation of the selection hint

Let’s see how the four contestants fared

  • One Dark Pro

  • Dracula Official

  • Bluloco Light Theme

  • Eva Light(Eva Theme)

Kudos to all four contestants for considering this detail

But if I had to quibble, I personally think Dracula-Official’s implementation of the check hints is the best, clear and clear while maintaining the theme’s high contrast

Other themes are either slightly out of step with the whole thing; Or it’s a little dull and not very focused

Maintenance is

The article will evaluate the maintenance of each theme from the two dimensions of update frequency and community activity

The update frequency

  • One Dark Pro

  • Dracula Official

  • Bluloco Light Theme

  • Eva Light(Eva Theme)

It’s been less than a month since the Bluloco Light Theme and Eva Light(Eva Theme) were last updated, and I think it’s safe to say they’re still pretty alive

One Dark Pro just got an update in 2021.5.5. Is that the strength of the top theme? !

Unfortunately, our Dracula Official is not as old as its name, it has been nearly half a year since its last update

Community activity

  • One Dark Pro

    The One Dark Pro community is, in my opinion, pretty robust: Project manager Binaryify is actively maintaining the project, 47 community members have contributed code directly to the project, and codeStream is sponsoring it

    I personally am very optimistic about the future of the One Dark Pro

  • Dracula Official

    Dracula Theme is a star open source project on Github, although the Official Dracula update has been somewhat disappointing

    The theme covers 181 applications, including editors like Vim, Emacs, Eclipse, browsers like Chrome, Firefox, and even design software like Adobe, Figma, etc

    In 2020, Dracula PRO, a one-stop-shop themed solution, was launched with a subscription system and was maintained by Zeno Rocha, the project’s founder

  • Bluloco Light Theme and Eva Light(Eva Theme)

    Unlike the two dark themes, which have quite mature communities, the two light themes are still in their relatively early stages

    If there are developers who like these two themes, then join them. That’s the beauty of open source, right? 🙂

    • Bluloco Light Theme
    • Eva Light(Eva Theme)

Some of the details

In addition to the stylized testing above, I’ve also found a few small developers’ designs while using these themes that I think are worth sharing

  • Highlighting of exception items

    Not only does the Bluloco Light Theme add a wavy line below the exception in a regular Theme, but it also adds color blocks to the exception to make it stand out under a lighter Theme

  • Highlight of the domain

    VSCode provides hints about the current scope to help you read the nested code, but the default is to bold the current scope identifier, which is not very intuitive

    Notice the change in the left vertical line in the figure below

    Eva Light(Eva Theme) highlights the tip in orange

conclusion

After the above evaluation, each plug-in theme shows its unique characteristics, and each has its own strengths. I think I can’t draw a conclusion that it is indispensable. I can only give the advantages of each theme based on my personal experience:

  • Solid option out of the box: The One Dark Pro
  • Dracula Official
  • Small but beautiful design: Bluloco-Light
  • Unique color expression: EVa-theme

That’s all the content of this VSCode plugin review, hope you enjoy 🙂