Modif Theme Visual Studio Code

Theme default dari VS Code sebenarnya sudah cukup enak, tapi sebagian orang mungkin perlu untuk memodifikasi tampilannya sesuai keinginan mereka. Misalnya menjadi gelap total, atau lainnya. Bisakah?

Bisa. Begini caranya:

Mengakses Appearance Settings.JSON

Tekan CTRL + Shift + P, lalu pilih Open Settings (UI)

Lalu pilih edit theme di JSON

Selanjutnya cari property “workbench.colorCustomizations” dan lakukan modifikasi. Pada property masukkan nama theme Anda, misalnya yang Anda pakai theme Monokai (lihat property workbench.colorTheme) maka masukkan Monokai juga di workbench.colorCustomizations

Apa saja setting yang bisa diatur? Silakan cek di https://code.visualstudio.com/docs/introvideos/configure

Setting Hitam Sempurna Untuk Editor

"workbench.colorTheme": "Monokai",
"workbench.colorCustomizations": {
    "[Monokai]": {
"activityBar.background": "#0E1421",
"breadcrumb.background": "#000000",
"editor.background": "#000000",
"editorGroupHeader.tabsBackground": "#0E1421
"list.hoverBackground": "#0E1421",
"minimap.background": "#0E1421",
"panel.background": "#0E1421",
"panel.border": "#444444",
"sideBar.foreground": "#c7c7c7",
"sideBar.background": "#0E1421",
"sideBarSectionHeader.background": "#0E1421",
"sideBar.border": "#444444",
"statusBar.background": "#0E1421",
"statusBar.foreground": "#626262",
"tab.inactiveBackground": "#0E1421",
"tab.activeBackground": "#0E1421",
"tab.activeBorder": "#ffd866",
"terminal.background": "#000000",
"titleBar.activeBackground": "#0E1421",
    }
}

Sumber: https://www.alveeakand.com/how-to-modify-themes-in-vscode/

Kita juga bisa mengubah agar setting workbench di atas berlaku untuk semua theme dengan mengganti nama themenya menjadi *, contoh:

Warna Bagus Lainnya

Kombinasi lainnya selain black adalah Monokai dengan warna background bernuansa biru seperti Cobalt2 (#193549) atau Playcode Blue (#15222E). Atau Firefly Pro (#0A0F17) atau Playcode Dark (#0D0D0D).

Monokai Text + Background Firefly

Setting Monokai Theme + Firefly Workbench: https://ahlikompie.com/wp-content/uploads/2023/01/Monokai-Text-Firefly-Workbench.txt

Biar tidak tabrakan dengan setting Peacock, bisa dicomment di bagian:

• “activityBar.background”
• “activityBar.foreground”
• “titleBar.activeBackground”

Editing Warna Font

Ikuti panduan di sini: https://code.visualstudio.com/docs/getstarted/themes

Ganti warna yang sesuai. Misalkan Monokai, merahnya (#F92672) dikurangi ketajamannya seperti warna merah di Monokai Pro (#FF6188) atau warna merah di Playcode (#E06C75).

Monokai Text + Dimmed Red

Setting Monokai Text + Dimmed Red: https://ahlikompie.com/wp-content/uploads/2023/01/Monokai-Text-Dimmed-Red.txt

Bagaimana cara mencari properti mana yg perlu dirubah warnanya? Tekan CTRL + SHIFT + P, lalu pilih generate theme color theme from current setting.

Theme Pilihan

Text paling berwarna: Monokai
— Lebih lembut: GitHub Dark
— Lebih lembut lagi: Atom One Dark, ini rekomendasi Fireship. Di Jetbrains IDE namanya One Dark Theme. Walau namanya beda, keduanya berbasis syntax dari Atom One Dark Syntax

Workbench paling menarik: Firefly Pro

Theme paling easy on eyes: Firefly Pro

Paling familiar: freeCodeCamp Dark Theme

Theme paling scientific: Dracula Pro

Ini namanya konsep Tetradic dalam lingkaran warna, di mana warna-warna ditaruh bersebrangan dalam color wheel; Untuk alternatif theme dengan warna yang seperti itu bisa dicek di sini. Sejauh ini baru ada dua, selain Dracula Pro

• Daobeam (Light)
• Color Wheel (Dark)

Custom Font

Untuk efek lebih keren lagi, gunakan font khusus coding: Jetbrains Mono. Jangan lupa untuk enable VS Code semantic highlighting. Untuk settingan ikutin saran JetBrains (detailnya di bawah). Enak ini, default setting JetBrains di VSCode tampil 57 baris full readable, padahal default bawaan VSCode hanya 48 baris (18% lebih banyak).

Download di sini, lalu ikuti cara install fontnya ke Windows

Lalu edit setting.json (ikuti cara di awal artikel ini) sebagai berikut:

    "editor.fontFamily": "'Jetbrains Mono'",
    "editor.fontLigatures": false,
    "editor.fontSize": 13,
    "editor.lineHeight": 1.2,
    "editor.semanticHighlighting.enabled": true,
    "editor.tabSize": 2,
    "relativeLineHeight.value": 1.2,

Referensi: https://stackoverflow.com/questions/31614605/how-to-use-custom-font-in-visual-studio-code