Introduction

This is a note for creating VS code theme. Hopefully it will fasten the process and reduce the time needed to debug.

This tutorial is pretty good too: https://youtu.be/pGzssFNtWXw

Steps

1 Generate boilder plate

https://www.npmjs.com/package/generator-code
follow it to get started

2 Find the appropriate color scheme

We will use two tools here:
Ctrl+Shift+P to inspect editor token and scopes
and
https://themes.vscode.one/

The inspect editor and scopes panel:

![[Pasted image 20221220174200.png]]

3. The json code editing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
{

    "name": "Eva Unit 1 Theme V3.0",

    "type": "dark",

    "principal-Colors": {

        "purple-deep": "#7F47CF",

    },

    "colors": {

        "progressBar.background": "#e091ff",

        "focusBorder": "#55ff00",

        "selection.background": "#18172421",

        "scrollbar.shadow": "#986FD8",
    },

    "tokenColors": [

        {

            "name": "comments",

            "scope": [

                "comment"

            ],

            "settings": {

                "foreground": "#cac0c093"

            }

        }]

}

“colors” are for editor colors, and tokenColors are for syntax. Use the name of the scope and assign color to them. You can group them and bind to a name category too.

4. Publish

Create a personal access token to let command line take care of publishment
![[Pasted image 20221220191152.png]]
https://marketplace.visualstudio.com/manage/createpublisher use this link to create publisher, an account could have multiple publisher.

In the package.json, config the following information - name of theme, description, version, publisher name that you created and github repo link etc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
"name": "eva-unit-01-theme",

    "displayName": "EVA Unit-01 Theme",

    "description": "An improved version of EVA 01 theme, better on the eyes and more accurate color combination",

    "version": "1.3.5",

    "publisher": "KingJacM",

    "repository": {

        "type": "git",

        "url": "https://github.com/KingJacM/eva-unit-01-theme"

    },

    "icon": "icon.png",

    "keywords": [

        "EVA",

        "theme",

        "dark theme",

        "anime",

        "eva theme",

        "eva 01",

        "evangelion"

    ],

run

vsce login [publisher name] enter token
run vsce publish [major/minor/patch]

more reading

https://code.visualstudio.com/api