How to change your VS Code appearance

Subscribe to my newsletter and never miss my upcoming articles

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 Alt Text

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

Comments (1)

Greg Flores's photo

Thanks for the Tokyo Night recommendation! It looks much better than the default themes or the ever popular material themes. One question about the font size, what resolution monitor do you typically use? Font size 12 seems so small to me!