How to change your VS Code appearance

Having my editor looks the way I want really helps my mood when I code.

You can do some things to customize your VS Code editor too.

🖥 Theme

Right now, I use the "Tokyo Night" theme for VS Code. I really like the colors and the fact that is not hurting my eyes with those nasty, bright colors.

To change the theme go to Settings > Workbench > Appearance > Color Theme.

✏️ Fonts

For the font, I use Cascadia Code from Microsoft right now.

Other similar fonts are: Victor Mono or Fira Code

I went with Cascadia Code because I think is the most readable; but in the end, it's a matter of opinion.

After you download and install the font on your computer, you can go to Settings > Text Editor > Font and put "cascadia code" in the Font Family input.

Font Ligatures

What I like about Cascadia Code font is that it supports font ligatures. This means that it replaces certain character combinations like === or <= or => with some icons and that makes the code look even better.

I also use some token color customizations that I'll show below 👇

That's how my VS Code looks right now

Here it is my full VS Code font configuration

"editor.fontFamily": "'cascadia code'",
    "editor.fontLigatures": true,
    "editor.fontWeight": 400,
    "editor.fontSize": 12,
    "editor.lineHeight": 23,
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": "emphasis",
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": "strong",
                "settings": {
                    "fontStyle": "bold"
                }
            },
            {
                "scope": "entity.other.attribute-name",
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": "markup.underline",
                "settings": {
                    "fontStyle": "underline"
                }
            },
            {
                "scope": "markup.bold",
                "settings": {
                    "fontStyle": "bold"
                }
            },
            {
                "scope": "markup.heading",
                "settings": {
                    "fontStyle": "bold"
                }
            },
            {
                "scope": "markup.italic",
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "name": "String interpolation",
                "scope": [
                    "punctuation.definition.template-expression.begin",
                    "punctuation.definition.template-expression.end",
                    "punctuation.section.embedded"
                ],
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "name": "this.self",
                "scope": "variable.language",
                "settings": {
                    "fontStyle": "italic",
                    "foreground": "#ff5874"
                }
            },
            {
                "name": "@Decorator",
                "scope": ["meta.decorator punctuation.decorator"],
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": ["punctuation.definition.comment", "comment"],
                "settings": {
                    // "foreground": "#ff5874",
                    "fontStyle": "italic"
                }
            },
            {
                "scope": [
                    //following will be in italic =FlottFlott
                    "entity.name.type.class", //class names
                    "keyword", //import, export, return…
                    "constant", //String, Number, Boolean…, this, super
                    "storage.modifier", //static keyword
                    "storage.type",
                    "storage.type.class.js" //class keyword
                ],
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": [
                    //following will be excluded from italics VSCode has some defaults for italics
                    "invalid",
                    "keyword.operator",
                    "constant.numeric.css",
                    "keyword.other.unit.px.css",
                    "constant.numeric.decimal.js",
                    "constant.numeric.json"
                ],
                "settings": {
                    "fontStyle": ""
                }
            }
        ]
    }

Let me know in the comments what VS Code Theme and Font are you using 👇

If you want to reach me, check out my website