Dark Lavender - A beautiful and useful VSCode theme

My first theme — Dark Lavender was released on May 2020. You may wonder why I'd spend so much time to create a new editor theme (it is no easy to create a high quality theme), the answer is simple — I couldn't find a satisfy theme. Thank Material Design color palette, I successfully created a colorful and beautiful theme.

Being a programmer, I'm also teaching JavaScript in my free time. The teaching experience made me think about whether my theme goes beyond good looking and help my student to learn programming? So, I'd start digging into TextMate tokens and scopes, try to find out how to group related tokens, and give them a representative color or font styling. I believe this can help both novice and experienced developers to distinguish different tokens more efficiently.

Language Token

Below I'll describe and demonstrate (in TypeScript) how I use different styling and color to emphasize different tokens.

Each demo provides a screenshot and inline code snippet. The screenshot gives you a preview of the actual effect, and if you want to try the snippet in your editor, you can copy and paste the inline code snippet to your VSCode.

To emphasize the italic effect, I use Victor Mono for screenshots below. If you prefer non-cursive font, Fira Code, Jetbrain Mono, and Iosevka are some of the best choices. I use Rec Mono, a high-quality variable font that supports many bold levels, ligatures, and four variants.

Built-in

Every token such as keyword, variable, or function provided by the language or platform itself is styled in italic. So, try not to re-assign or change its value.

// `import` and `from` are JavaScript keyword
import path from 'path';

// `Date` is JavaScript built-in class
Date.now();

// `JSON` is JavaScript built-in namespace
JSON.stringify({});

// `document` is provide by browser API
document.querySelector('');

keyword

Almost every Programming language has predefined keywords. Dark Lavender divides them into two groups — keyword for declaration or not.

For declaration keywords (including modifier) are colored in red (pink color in MD palette).

// variable declaration keywords
const foo = 'foo';
let bar = 'bar';

// interface declaration keyword
interface ICustomError {}

// class or modifier declaration keywords
class CustomError extends Error implements ICustomError {
  constructor(public readonly code) {
    super();
  }
}

For non-declaration keywords (mostly statement) are colored in purple.

import fs from 'fs/promises';

function check(foo: { isOK: boolean }) {
  for (const key in foo) {
  }

  if (foo.isOK) return 'OK';
  else throw 'NOT OK';
}

Operator

Operators are colored in light green. You may think "What special about operator? Isn't all operators are punctuation? Developer should easily distinguish for them, right?".

Not really, some languages have "word like" operators like new and delete in JavaScript/TypeScript.

With a different color, now you can easily tell which keyword is operator, even you are a novice developer.

1 + 2 - 3 * 4;

new Date();
delete { foo: 123 }.foo;

Primitive Value

There is three main primitive value across almost every programming language — string, number, and boolean. These three primitive value has their own color;

Function may not treat as a value in some languages, but it does exist in almost every language.

Not like other kinds of value, function represent the concept of logic instead of data, so function has its own color.

'this is string';
3.142;
true;
false;

function foo() {}
foo();

Types

Every built-in or custom types and classes are colored in yellow. In many languages, class can be both value and type, so they share the same color.

// Date is a built-in class
const date: Date = new Date();

// `Person` is custom type
// `string`, `number`, and `boolean` are built-in types
interface Person {
  name: string;
  age: number;
  isAdult: boolean;
}

Variable, Parameter and Object Property

When talking about variable in most of the non FP languages, we concern about "Is the variable re-assignable or not?".

For re-assignable, non re-assignable, and language specify variables, they all have their own color, respectively.

var foo1 = 're-assignable';
let foo2 = 're-assignable';
const foo3 = 'non re-assignable'; // foo3 is bold because readonly
let foo4 = () => {};
const foo5 = () => {}; // foo5 is bold too

Node.ATTRIBUTE_NODE; // readonly + built-in => bold + italic

// Parameter is acting like variable, so they share the same color for no doubt
function bar(baz) {}


// language specify variables also have their own color.
// (Material Design red)
this.foo;
true;
false;
undefined;

Object property is acting like variable too, but in Dark Lavender, object property does not share the same color with variable.
Because this can help developer distinguish the difference between them from the situation like destructuring or object literal shorthand.

class Foo {
  constructor(public bar, public readonly baz) {
    this.bar; // normal property
    this.baz; // bold if readonly
  }

  update(arg: { bar: string; baz: string }) {
    const { bar, baz } = arg;
    // property `bar` and variable `bar` have difference color
    // VSCode semantic highlight and textmate treat `baz` with difference perspective
    // the former treat `baz` as property but constant variable for the latter
    // if you disabled semantic highlight in VSCode you may see difference colorizing
    return { bar: bar, baz };
  }
}

Regular Expression

RegExp is one of the most powerful features in programming language, but it is hard to remember which character should escape or which symbol is simply a text rather than a special symbol, even for an experienced developer.

// normal text is color just like string
const regex1 = /123abc/;
// keyword and quantifier in between normal text are colarize differently
const regex2 = /^##*%%?&&$/;
// () [] grouping
const regex3 = /(on|off|[A-Z]{2,3})/;

Conclusion

As you can see, I try to group related tokens and give them a representative color or style, and I believe that this can help you learn coding and understand your code. Besides JavaScript/TypeScript, Dark Lavender also provides basic support for many mainstream languages such as CSS, HTML, Java, Go, C++, and more. I'll keep improving this theme in the future, so if you have any feedback would like to share or find any issue, please let me know. If you like this theme, don't forget to share, comment, and star in VSCode marketplace and github. Thank you.