Cara Membuat Tema Vscode Sendiri

Untuk memulainya kita bisa menggunakan alat yang namanya Yo Generator yaitu adalah alat untuk membuatkan kita boilerplate dalam membuat extensi di vscode.

Untuk memulainya Anda bisa install terlebih dahulu node package nya secara global seperti

npm install -g yo generator-code

Setelah itu selesai, maka sekarang Anda bisa membuat tema dengan menjalankan perintah yo code seperti:

yo code

Maka dia akan mengeluarkan output pertanyaan bahwa sebenarnya kita ingin membuat extensi apa.

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? (Use arrow keys)
❯ New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
  New Language Pack (Localization)
  New Web Extension (TypeScript)
  New Notebook Renderer (TypeScript)

Jika Anda ingin membuat tema, maka Anda bisa pilih "New Color Theme", dan selanjutnya dia akan bertanya apakah kita ingin mulai dari awal atau ada extensi tema yang ingin ditiru? Jika tidak ada maka Anda bisa pilih "No, start fresh" seperti:

? What type of extension do you want to create? New Color Theme
? Do you want to import or convert an existing TextMate color theme? (Use arrow keys)
❯ No, start fresh
  Yes, import an existing theme but keep it as tmTheme file.
  Yes, import an existing theme and inline it in the Visual Studio Code color theme file.

Selanjutnya dia akan menanya informasi seperti apa nama tema, pembuat, deskripsi singkat, dll. Dan setelah itu selesai, terakhir kalinya dia akan bertanya bahwa apakah kita ingin membukanya langsung dengan vscode, maka Anda jawab "y".

Jika sudah, maka dia menggenerasi beberap folder dan file untuk kemudian kita edit seperti tree di bawah ini:

├── CHANGELOG.md
├── README.md
├── package.json
├── themes
│   └── irsyadadl-color-theme.json
└── vsc-extension-quickstart.md

1 yang Anda perlu lihat adalah file yang ada di dalam folder themes yaitu irsyadadl-color-theme.json, disitulah tempat Anda mengedit semuanya. Berikut adalah boilerplate yang diberikannya.

{
	"name": "irsyadadl",
	"colors": {...},
	"tokenColors": [...]
}

colors itu untuk workbench, dan tokenColors untuk warna syntax, atau markup kita. Untuk contoh saja, saya akan langsung peraktekkan untuk colors terlebih dahulu.

{
    "name": "irsyadadl",
    "colors": {
        "editor.background": "#1F2937",
        "editorGutter.background": "#1F2937",
        "editorGroupHeader.noTabsBackground": "#1F2937",
        "editorGroupHeader.border": "#374151",
        "sideBar.background": "#111827",
        "scrollbar.shadow": "#1E293B",
        "sideBar.border": "#374151",
        "sideBar.foreground": "#9CA3AF"
    },
    "tokenColors": [...]
}

Lanjut untuk tokenColors nya bisa Anda buat seperti ini saja dahulu.

{
    "name": "irsyadadl",
    "colors": {...},
    "tokenColors": [
        {
            "name": "String",
            "scope": [
                "string.quoted.double.json.comments",
                "string.quoted.single.html",
                "string.quoted.double.js.jsx",
                "string.quoted.single.php",
                "string.quoted.double.html",
                "strings"
            ],
            "settings": {
                "foreground": "#EFD5AF"
            }
        }
    ]
}

Mungkin Anda akan bingung dan bertanya bagaimana cara mengetahui tag, function, comments, dll. Tenang! Anda bisa tekan ctrl/cmd + shift + p pada keyboard dan cari "Inspect Editor Tokens And Scopes". Anda hanya perlu arahkan cursor tepat dimana warna yang ingin dirobah seperti gambar berikut:

Jika sudah seperti itu, maka akan muncul textmate scopes, atau keyword.operator yang bisa Anda cari di dalam file x-theme.json tersebut. Kemudian untuk sidebar, activityBar, dll Anda bisa lihat langsung di sini.

Setelah kalian selesai membuat temanya, waktunya untuk menerbitkannya. Pertama, Anda harus mendaptar dahulu di Azure DevOps, ikuti langkah selanjutnya seperti membuat organisasi, mendaftarkan tema yang telah dibuat, dan kemudian terbitkan.

Semoga artikel ini bermanfaat, until next time. 👋🏻