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
Leave a Reply