Bagaimana cara mengedit tema gelap default untuk Visual Studio Code?


90

Saya menggunakan Windows 7 64-bit.

Apakah ada cara untuk mengedit tema gelap default di Visual Studio Code? Di %USERPROFILE%\.vscodefolder hanya ada tema dari ekstensi, sedangkan di jalur instalasi (saya menggunakan default, C:\Program Files (x86)\Microsoft VS Code) ada file dari beberapa tema standar di \resources\app\extensions, seperti Kimbie Dark, Solarized Dark / Light atau varian Monokai, tetapi tidak ada tema gelap default.

Tetapi jika bagaimanapun juga ada kemungkinan untuk mengeditnya, maka blok kode mana yang bertanggung jawab atas warna anggota objek, anggota penunjuk dan nama kelas dan struktur dalam bahasa C ++?


4
Untuk siapa pun yang datang ke sini: Anda tidak perlu mencari dan memodifikasi atau membuat file tema apa pun. Semuanya dapat dimodifikasi menggunakan workbench.colorCustomizationsdan editor.tokenColorCustomizationsdalam pengaturan pengguna: code.visualstudio.com/docs/getstarted/… .
chipit24

Seseorang juga bisa bertahan untuk kedaluwarsa, tetapi sedang mengerjakan fitur yang memungkinkan kami menambahkan CSS global khusus, seperti Atoms Edit -> Stylesheet...Perubahan terakhir pada masalah ini adalah Maret github.com/Microsoft/vscode/issues/459 . Ini mengecewakan karena ditutup untuk komentar. API saat ini tidak mengizinkan ekstensi untuk mengubah CSS global ... jadi kami harus menunggu, atau menempelkan CSS secara manual ke Alat Pengembang seperti manusia gua.
Ray Foss

Jawaban:


50

File yang Anda cari ada di,

Microsoft VS Code \ resources \ app \ extensions \ theme-defaults \ themes

di Windows dan cari nama file dark_vs.jsonuntuk menemukannya di sistem lain.


Memperbarui:

Dengan versi baru VSCode Anda tidak perlu mencari file pengaturan untuk menyesuaikan tema. Sekarang Anda dapat menyesuaikan tema warna Anda dengan pengaturan workbench.colorCustomizationsdan editor.tokenColorCustomizationspengguna. Dokumentasi tentang masalah tersebut dapat ditemukan di sini .


13
Di Linux, ada di/usr/share/code/resources/app/extensions/theme-defaults/themes
sigalor

1
Di Arch Linux, ini (rilis open-source) di/usr/lib/code/extensions/theme-defaults/themes
hendalst

3
Secara default, VS Code diinstal di C: \ users \ {username} \ AppData \ Local \ Programs \ Microsoft VS Code
Toivo Säwén

2
Pembaruan untuk jawaban ini adalah rekomendasi yang bagus. Saya menemukan bahwa jika Anda mengedit file tema secara langsung, mereka dapat / akan ditimpa pada update ke VS Code.
cniggeler

75

Dalam kode VS 'Pengaturan Pengguna', Anda dapat mengedit warna yang terlihat menggunakan tag berikut (ini adalah contoh dan ada lebih banyak tag),

"workbench.colorCustomizations": {
    "list.inactiveSelectionBackground": "#C5DEF0",
    "sideBar.background": "#F8F6F6",
    "sideBar.foreground": "#000000",
    "editor.background": "#FFFFFF",
    "editor.foreground": "#000000",
    "sideBarSectionHeader.background": "#CAC9C9",
    "sideBarSectionHeader.foreground": "#000000",
    "activityBar.border": "#FFFFFF",
    "statusBar.background": "#102F97",
    "scrollbarSlider.activeBackground": "#77D4CB",
    "scrollbarSlider.hoverBackground": "#8CE6DA",
    "badge.background": "#81CA91"}

Jika Anda ingin mengedit beberapa token warna C ++, gunakan tag berikut,

"editor.tokenColorCustomizations": {
    "numbers": "#2247EB",
    "comments": "#6D929C",
    "functions": "#0D7C28"
}

1
Tetapi jika itu di luar tokenColorCustomization, apa yang harus saya lakukan?
Alex

Di mana seseorang dapat menemukan daftar semua opsi yang tersedia di "editor.tokenColorCustomizations"?
ololobus


Pengeditan saya ditolak karena beberapa alasan, tetapi untuk membuat jawaban ini secara khusus menjawab keinginan OP untuk mengubah tema tertentu, Anda dapat menentukan tema dan mengubah warna tanpa mengubah file tema: "workbench.colorCustomizations": {"[Kimbie Dark]" : {"activityBar.foreground": "# 472c0c"}}
aamarks

Ini disebut "Meja Kerja: Kustomisasi Warna" dalam pengaturan
Zach Saucier

29

Sejauh tema, VS Code sama dapat diedit seperti Sublime. Anda dapat mengedit salah satu tema default yang disertakan dengan kode VS. Anda hanya perlu tahu di mana menemukan file tema.

Catatan samping: Saya suka tema Monokai. Namun, yang ingin saya ubah hanyalah latar belakangnya. Saya tidak suka latar belakang abu-abu gelap. Sebaliknya, menurut saya kontrasnya JAUH lebih baik dengan latar belakang hitam pekat. Kode lebih banyak muncul.

Bagaimanapun, saya mencari file tema dan menemukannya (di windows) di:

c: \ Program Files (x86) \ Microsoft VS Code \ resources \ app \ extensions \ theme-monokai \ themes \

Di folder itu saya menemukan file Monokai.tmTheme dan memodifikasi kunci latar belakang pertama sebagai berikut:

<key>background</key>
<string>#000000</string>

Ada beberapa kunci 'latar belakang' di file tema, pastikan Anda mengedit yang benar. Yang saya edit ada di bagian paling atas. Baris 12 saya pikir.


5
Lokasi pemasangan Ubuntu seperti/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_vs.json
Max

5
Dan untuk mac, saya menemukan memperbarui file di jalur ini berhasil: /Users/user-name/.vscode/extensions/azemoh.one-monokai-0.3.3/themes/OneMonokai-color-theme.jsoncmd + shift + p dan ketik reload windowcmd untuk segera mencoba perubahan :)
balajikris

1
Memodifikasi latar belakang tema juga dapat dilakukan dengan "workbench.colorCustomizations": { "[Theme You Want to Update]": { "editor.background": "#000000" }Dalam pengaturan pengguna.
Bilbo

1
Untuk 64-bit VS Code di Windows, jalur dasarnya adalah C:\Program Files\Microsoft VS Code\resources\app\extensions\ , biasanya diikuti olehtheme-....
Peter B

Ubah tema di pengaturan pengguna dengan "workbench.colorCustomizations": { "editor.background": "#000" },. Berikut adalah semua penyesuaian berbeda yang dapat Anda buat: code.visualstudio.com/api/references/theme-color
Jeremy Moritz

17

Anda tidak dapat "mengedit" tema default, tema tersebut "dikunci"

Namun, Anda dapat menyalinnya ke tema khusus Anda sendiri, dengan modifikasi persis yang Anda inginkan.

Untuk info lebih lanjut, lihat artikel ini: https://code.visualstudio.com/Docs/customization/themes https://code.visualstudio.com/docs/extensions/install-extension#_your-extensions-folder

Jika yang ingin Anda ubah hanyalah warna untuk kode C ++, Anda harus melihat penimpaan pewarna dukungan c ++. Untuk info tentang itu, buka di sini: https://code.visualstudio.com/docs/customization/colorizer

EDIT: Tema gelap ditemukan di sini: https://github.com/Microsoft/vscode/tree/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults

EDIT2: Untuk memperjelas:


1
Dan dari mana saya bisa menyalinnya? Dalam artikel yang Anda kirimkan kepada saya tidak ada apa-apa tentang itu. Dan saya tidak ingin menginstal apa pun untuk hal yang sepele seperti mengubah penyorotan sintaks sedikit - terutama ketika saya bisa membuka file yang benar dan memodifikasi beberapa baris kode, jika tema default tidak dikunci. Selain itu, membuat tema baru dengan Yeoman Generator membutuhkan file .tmTheme dari tema lain - tidak ada tema gelap Visual Studio di situs web ColorSublime dan saya tidak memiliki akses ke "yang terkunci" dari VSC.
Toreno96

Mungkin saya bisa mengedit file c ++. Plist dari "C: \ Program Files (x86) \ Microsoft VS Code \ resources \ app \ extensions \ cpp"? Tetapi blok kode mana yang harus saya ubah? Atau mungkin ada file sumber dari tema gelap default VSC di suatu tempat, yang dapat saya gunakan untuk membuat tema khusus saya sendiri?
Toreno96

Anda tidak dapat mengeditnya, karena saya yakin itu disimpan dalam kode sumber. Namun Anda dapat menyalin / menempelnya dan mengubah beberapa baris. Itu terletak di GitHub. Saya menemukannya untuk Anda: github.com/Microsoft/vscode/tree/… Jawaban yang diedit dengan tautan
Tobiah Zarlez

Dimungkinkan untuk mengedit file c ++. Plist yang saya sebutkan, saya memeriksanya. Dan saya mengerti dari artikel tentang pewarna bahwa itu adalah file pewarna standar untuk bahasa C ++. Koreksi saya jika saya salah. Tetapi jika Anda masih berbicara tentang mengedit tema default - ya, saya tahu saya tidak bisa melakukan itu, saya mengerti kalimatnya dari jawaban pertama Anda. Terima kasih atas informasi tentang kode sumber di GitHub dan tautan - tetapi saya telah memeriksa dan tema dari sana bukan yang default, tetapi dimodifikasi, variasi yang lebih berwarna dari ini. Sayangnya, tidak dengan cara yang saya inginkan.
Toreno96

1
Tetapi secara tidak sengaja saya menemukan, bahwa tema "Xcodedefault" dari galeri ekstensi memiliki penyorotan sintaks yang sama dengan yang gelap default. Karena sekarang ada di folder ekstensi pada disk saya, setelah instalasi, saya dapat memodifikasinya, seperti saya ingin mengubah tema gelap default. Jadi, masalah saya terpecahkan.
Toreno96

15

Cara termudah adalah dengan mengedit pengaturan pengguna dan menyesuaikan workbench.colorCustomizations

Mengedit kustomisasi warna

Jika Anda ingin membuat tema Anda

Ada juga opsi untuk mengubah tema saat ini yang akan menyalin pengaturan tema saat ini dan membiarkan Anda menyimpannya sebagai *.color-theme.jsonfile JSON5

Hasilkan tema warna dari pengaturan saat ini


1
Ingin menyusun ulang jawaban Anda sehingga jawaban yang lebih baik dan mudah adalah yang pertama? =]
Relequestual

14

Tema warna apa pun dapat diubah di bagian pengaturan ini pada VS Code versi 1.12 atau lebih tinggi:

 // Overrides colors from the currently selected color theme.
  "workbench.colorCustomizations": {}

Lihat https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme

Nilai yang tersedia untuk diedit: https://code.visualstudio.com/docs/getstarted/theme-color-reference

EDIT: Untuk mengubah warna sintaks, lihat di sini: https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_syntax-highlighting-colors dan di sini: https://www.sublimetext.com/docs/ 3 / scope_naming.html


Dengan itu Anda dapat mengganti warna editor itu sendiri tetapi tidak ada warna dari beberapa kata kunci (mis: warna string).
Jhegs

7

Seperti yang dinyatakan orang lain, Anda harus mengganti editor.tokenColorCustomizationsatau workbench.colorCustomizationspengaturan di file settings.json. Di sini Anda dapat memilih tema dasar, seperti Abyss, dan hanya menimpa hal-hal yang ingin Anda ubah. Anda dapat mengganti sangat sedikit hal seperti fungsi, warna string, dll dengan sangat mudah.

Misalnya untuk workbench.colorCustomizations

"workbench.colorCustomizations": {
    "[Default Dark+]": {
        "editor.background": "#130e293f",
    }
}

Misalnya untuk editor.tokenColorCustomizations:

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "functions": "#FF0000",
        "strings": "#FF0000"
    }
}
// Don't do this, looks horrible.

Namun, penyesuaian mendalam seperti mengubah warna varkata kunci akan mengharuskan Anda memberikan nilai penggantian di bawah textMateRuleskunci.

Misalnya di bawah ini:

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "textMateRules": [
            {
                "scope": "keyword.operator",
                "settings": {
                    "foreground": "#FFFFFF"
                }
            },
            {
                "scope": "keyword.var",
                "settings": {
                    "foreground": "#2871bb",
                    "fontStyle": "bold"
                }
            }
        ]
    }
}

Anda juga dapat mengganti secara global di seluruh tema:

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": [
                //following will be in italics (=Pacifico)
                "comment",
                "entity.name.type.class", //class names
                "keyword", //import, export, return…
                //"support.class.builtin.js", //String, Number, Boolean…, this, super
                "storage.modifier", //static keyword
                "storage.type.class.js", //class keyword
                "storage.type.function.js", // function keyword
                "storage.type.js", // Variable declarations
                "keyword.control.import.js", // Imports
                "keyword.control.from.js", // From-Keyword
                //"entity.name.type.js", // new … Expression
                "keyword.control.flow.js", // await
                "keyword.control.conditional.js", // if
                "keyword.control.loop.js", // for
                "keyword.operator.new.js", // new
            ],
            "settings": {
                "fontStyle": "italic"
            }
        }
    ]
}

Detail lebih lanjut di sini: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide


5

Solusi untuk MAC OS

Saya tidak yakin apakah jawaban ini cocok di sini, tetapi saya ingin membagikan solusi untuk pengguna MAC dan terlihat canggung jika saya memulai pertanyaan baru dan menjawab sendiri di sana.


cari jalur tema VSCode Anda seperti di bawah ini:

..your_install_location / Visual Studio Code.app/Contents/Resources/app/extensions/theme-name/themes/theme_file.json

buka file .json dan cari gaya yang Anda targetkan untuk diubah.
Untuk kasus saya, saya ingin mengubah spasi render warna
dan saya telah menemukan itu sebagai
"editorWhitespace.foreground"
begitu di bawah settings.jsondalam Visual Studio Code,
saya menambahkan baris berikut (saya lakukan dalam Workspace Pengaturan),

"workbench.colorCustomizations": {
    "editorWhitespace.foreground": "#93A1A130" // stand as #RRGGBBAA
}

Solusi dipandu dari: https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme


Jangan lupa untuk ⌘ Command+ Smenyimpan pengaturan agar berfungsi.


2

The docs sekarang memiliki seluruh bagian tentang hal ini.

Pada dasarnya, gunakan npmuntuk menginstal yo, dan menjalankan perintah yo codedan Anda akan mendapatkan sedikit wizard berbasis teks - salah satu opsinya adalah membuat dan mengedit salinan skema gelap default.


2

Saya datang ke sini untuk menemukan cara mengedit tema, tetapi tidak dapat menemukannya di Mac saya. Setelah menyelam lebih dalam, akhirnya saya menemukan tempat pemasangan:

~/.vscode/extensions

Semua ekstensi di sana!

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.