Membuat tema kustom di Visual Studio Code adalah salah satu cara terbaik untuk menciptakan pengalaman ngoding yang lebih personal dan nyaman. Dengan membuat tema sendiri, kamu bisa mengatur warna editor, syntax, sidebar, panel, dan berbagai elemen UI sesuai preferensi pribadi. Proses ini ternyata tidak serumit yang terlihat; bahkan pemula pun bisa melakukannya dengan mengikuti panduan langkah demi langkah berikut.

Membuat Tema Kustom Sendiri di Visual Studio Code

Visual Studio Code (VS Code) merupakan salah satu editor kode paling populer di dunia. Ribuan developer memakainya setiap hari karena ringan, fleksibel, dan sangat bisa disesuaikan. Salah satu fitur yang paling disukai adalah kemampuan untuk membuat tema kustom sendiri. Dengan tema buatan sendiri, kamu bisa menentukan nuansa coding yang paling nyaman — apakah itu gelap, cerah, minimalis, pastel, neon, atau monochrome.

Dalam tutorial ini, kita akan membahas cara membuat tema kustom di Visual Studio Code secara lengkap, mulai dari persiapan, struktur file tema, pengaturan warna, pengujian, hingga cara mempublikasikan tema ke marketplace.

Persiapan Awal

Sebelum memulai, berikut beberapa hal yang perlu dipersiapkan:

✔ 1. Install VS Code

Pastikan Anda sudah menggunakan versi terbaru.

✔ 2. Install Node.js & npm

Tema VS Code dipublikasikan menggunakan tool berbasis Node.js.

✔ 3. Install Yo (Yeoman) dan Generator Code

VS Code menyediakan generator resmi untuk membuat tema.
Jalankan:

npm install -g yo generator-code

Setelah itu, kamu siap membuat folder tema.

Membuat Proyek Tema Baru

Buka terminal, lalu jalankan:

yo code

Setelah itu pilih:

✔ New Color Theme
✔ No, I would not like to start with a sample
✔ Beri nama tema (misal: “Arva Midnight Theme”)
✔ Pilih dark/light
✔ Pilih lokasi penyimpanan proyek

Yeoman akan membuatkan struktur project VS Code Extension yang berisi file utama tema (JSON) dan metadata extension.

Memahami Struktur File Tema

File tema biasanya berada di:

./themes/nama-theme-color-theme.json

Isi file terdiri dari 2 bagian utama:

A. Warna UI (workbench colors)

Mengontrol tampilan panel, tab, sidebar, status bar, dsb.

"colors": {
  "editor.background": "#0D0D0D",
  "editor.foreground": "#FFFFFF",
  "activityBar.background": "#111111",
  "sideBar.background": "#1A1A1A"
}

B. Token Colors (syntax highlighting)

Mengatur warna untuk keyword, string, function, variable, operator, dsb.

"tokenColors": [
  {
    "scope": ["keyword"],
    "settings": { "foreground": "#FF5577" }
  },
  {
    "scope": ["string"],
    "settings": { "foreground": "#A3E635" }
  }
]

Setiap scope mewakili elemen sintaks tertentu. Kamu bisa menemukan daftar lengkap scope di dokumentasi TextMate Grammars.

Memilih Warna yang Konsisten

Agar tema terlihat profesional, gunakan skema warna yang konsisten:

Tips memilih palet warna tema

Gunakan 3–5 warna utama saja.
Pastikan kontras tinggi untuk readability.
Hindari warna merah terang untuk teks biasa—lebih cocok untuk error.
Gunakan warna lembut untuk komentar dan teks minor.
Gunakan warna aksen unik (misal biru neon) untuk function atau operator.

Ada banyak website untuk membantu memilih palet:

Coolors
Tailwind CSS Color Generator
Material Palette

Mengedit & Menguji Tema Langsung di VS Code

VS Code mempermudah proses debugging tema kustom.

✔ Jalankan extension tema

Masuk ke folder project lalu jalankan:

code .

Tekan F5 → VS Code akan membuka development host dengan tema Anda.

✔ Aktifkan Tema

Pergi ke:

Command Palette → Preferences: Color Theme → Pilih tema Anda

Ketika Anda mengubah file JSON tema, cukup simpan file dan development host akan merefresh tema otomatis.

Mengatur Syntax Highlighting Lebih Detail

Agar tema terlihat modern dan enak dipakai, atur lebih banyak scope penting:

Beberapa scope umum:

Scope	Deskripsi
`keyword`	if, while, return
`variable`	nama variabel
`function`	nama fungsi
`comment`	komentar
`string`	teks string
`constant.numeric`	angka
`entity.name.type`	class, struct
`punctuation`	tanda baca

Contoh lengkap:

{
  "scope": "variable",
  "settings": {
    "foreground": "#93C5FD",
    "fontStyle": ""
  }
},
{
  "scope": "entity.name.function",
  "settings": {
    "foreground": "#FDE047"
  }
},
{
  "scope": "comment",
  "settings": {
    "foreground": "#6B7280",
    "fontStyle": "italic"
  }
}

Semakin detail scope yang Anda kelola, semakin halus hasil temanya.

Menambahkan Ikon Tema (Opsional)

Kamu bisa menambahkan ikon extension dengan file PNG atau SVG.

Letakkan di folder:

./images/icon.png

Kemudian daftarkan di package.json:

"icon": "images/icon.png"

Mempublikasikan Tema ke Marketplace

Jika tema Anda sudah siap dibagikan, Anda bisa publish ke Visual Studio Marketplace.

✔ Install `vsce`

npm install -g vsce

✔ Login / membuat personal access token (Azure DevOps)

✔ Packaging extension

vsce package

File .vsix akan tercipta.

✔ Publish

vsce publish

Tema Anda kini bisa diunduh oleh jutaan developer di seluruh dunia.

Tips Membuat Tema VS Code yang Disukai Banyak Orang

Gunakan warna berbeda untuk function dan variable
Pastikan komentar terlihat lembut, tidak mengganggu
Gunakan warna error yang jelas
Selalu cek readability untuk jangka panjang
Buat dua versi: dark dan light
Buat variasi high contrast jika memungkinkan
Pilih nama tema yang unik dan mudah diingat

Contoh nama tema yang menarik:

Midnight Ocean
Pastel Hacker
Neon Galaxy
Earth Dark
Aura Soft

Kesimpulan

Membuat tema kustom di Visual Studio Code adalah proses yang menyenangkan dan memberikan banyak kebebasan kreatif. Dengan memahami struktur JSON, mengatur warna dengan cermat, dan menguji langsung di development host, kamu bisa menghasilkan tema yang profesional dan nyaman dipakai harian. Bahkan, kamu bisa mempublikasikan tema tersebut dan menginspirasi developer lain.

Tema yang bagus bukan hanya soal estetika, tetapi juga tentang meningkatkan fokus, mengurangi kelelahan mata, dan membuat pengalaman coding lebih menyenangkan.