Visual Studio Code için varsayılan karanlık temayı nasıl düzenleyebilirim?


89

Windows 7 64-bit kullanıyorum.

Visual Studio Code'da varsayılan koyu temayı düzenlemenin bir yolu var mı? In %USERPROFILE%\.vscodeklasöründen uzantıları sadece temalar yükleme yolu (I varsayılan kullanılan iken, orada C:\Program Files (x86)\Microsoft VS Code) orada bazı standart temalarından dosyalardır \resources\app\extensionsKimbie Karanlık, solarized Koyu / Light gibi veya Monokai ait varyantları, ancak hiçbir varsayılan karanlık bir tema vardır.

Ama sonuçta onu düzenleme imkanı varsa, o zaman hangi kod blokları nesnenin üyesinin renginden, işaretçinin üyesinden ve C ++ dilinde sınıf ve yapının adından sorumludur?


4
Buraya gelen herkes için: herhangi bir tema dosyası aramanıza, değiştirmenize veya oluşturmanıza gerek yoktur. Her şey kullanılarak workbench.colorCustomizationsve editor.tokenColorCustomizationskullanıcı ayarlarında değiştirilebilir: code.visualstudio.com/docs/getstarted/… .
chipit24

Biri de eski bir süre bekleyebilir, ancak Atoms Edit -> Stylesheet...soruna son değişiklik Mart github.com/Microsoft/vscode/issues/459 gibi özel global CSS eklememize izin verecek özellik üzerinde çalışılıyor . Yorumlara kapalı olması hayal kırıklığı yaratıyor. Mevcut API, bir uzantının global CSS'yi değiştirmesine izin vermiyor ... bu nedenle, CSS'yi mağara adamı gibi Geliştirici Araçlarına beklememiz veya manuel olarak yapıştırmamız gerekecek.
Ray Foss

Yanıtlar:


50

Aradığınız dosya,

Microsoft VS Kodu \ kaynaklar \ uygulama \ uzantılar \ tema-varsayılanları \ temalar

Windows'ta ve dark_vs.jsonbaşka bir sistemde bulmak için dosya adını arayın .


Güncelleme:

VSCode'un yeni sürümleriyle, temayı özelleştirmek için ayarlar dosyasını aramanıza gerek kalmaz. Artık renk temanızı workbench.colorCustomizationsve editor.tokenColorCustomizationskullanıcı ayarlarıyla özelleştirebilirsiniz . Konuyla ilgili belgeler burada bulunabilir .


13
Linux'ta, İçinde/usr/share/code/resources/app/extensions/theme-defaults/themes
sigalor

1
Arch Linux'ta, (açık kaynak sürümü) içinde/usr/lib/code/extensions/theme-defaults/themes
hendalst

3
VS Code varsayılan olarak C: \ users \ {username} \ AppData \ Local \ Programs \ Microsoft VS Code
Toivo Säwén'de

2
Bu cevabın güncellenmesi sağlam bir öneridir. Tema dosyalarını doğrudan düzenlerseniz VS Code güncellemesinde bunların üzerine yazılabileceğini / yazılacağını öğrendim.
cniggeler

75

VS kodu 'Kullanıcı Ayarları'nda, aşağıdaki etiketleri kullanarak görünür renkleri düzenleyebilirsiniz (bu bir örnektir ve çok daha fazla etiket vardır),

"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"}

Bazı C ++ renk belirteçlerini düzenlemek istiyorsanız, aşağıdaki etiketi kullanın,

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

1
Ancak, tokenColorCustomizations'ın ötesindeyse, ne yapmalıyım?
Alex

"Editor.tokenColorCustomizations" içinde mevcut tüm seçeneklerin listesi nerede bulunabilir?
ololobus


Düzenlemem bazı nedenlerden dolayı reddedildi, ancak bu cevabın özellikle OP'nin belirli bir temayı değiştirme isteğini ele almasını sağlamak için temayı belirleyebilir ve temanın dosyalarını değiştirmeden renkleri değiştirebilirsiniz: "workbench.colorCustomizations": {"[Kimbie Dark]" : {"activityBar.foreground": "# 472c0c"}}
2019

Ayarlarda buna "Workbench: Color Customizations" deniyor
Zach Saucier

29

Temalara gelince, VS Code, Sublime kadar düzenlenebilir. VS koduyla birlikte gelen varsayılan temalardan herhangi birini düzenleyebilirsiniz. Sadece tema dosyalarını nerede bulacağınızı bilmelisiniz.

Yan not: Monokai temasını seviyorum. Ancak, değiştirmek istediğim tek şey arka plandaydı. Koyu grimsi arka planı sevmiyorum. Bunun yerine, siyah bir arka planla kontrastın ÇOK daha iyi olduğunu düşünüyorum. Kod çok daha fazla ortaya çıkıyor.

Her neyse, tema dosyasını aradım ve (pencerelerde) şu adreste buldum:

c: \ Program Dosyaları (x86) \ Microsoft VS Kodu \ kaynaklar \ uygulama \ uzantılar \ tema-monokai \ temalar \

Bu klasörde Monokai.tmTheme dosyasını buldum ve ilk arka plan anahtarını aşağıdaki gibi değiştirdim:

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

Tema dosyasında birkaç 'arka plan' anahtarı vardır, doğru olanı düzenlediğinizden emin olun. Düzenlediğim en üstteydi. Sanırım 12. Satır.


5
Ubuntu yükleme konumları şöyledir/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_vs.json
Max

5
Mac için, şu yollardaki dosyaları güncellemenin işe yaradığını buldum: /Users/user-name/.vscode/extensions/azemoh.one-monokai-0.3.3/themes/OneMonokai-color-theme.jsoncmd + shift + p ve reload windowdeğişikliği hemen denemek için cmd yazın :)
balajikris

1
Temanın arka planını değiştirmek, "workbench.colorCustomizations": { "[Theme You Want to Update]": { "editor.background": "#000000" }kullanıcı ayarlarında da yapılabilir .
Bilbo

1
Windows'taki 64-bit VS Code için temel yol C:\Program Files\Microsoft VS Code\resources\app\extensions\ , genellikle ardındantheme-....
Peter B

Temayı kullanıcı ayarlarında ile değiştirin "workbench.colorCustomizations": { "editor.background": "#000" },. Yapabileceğiniz tüm farklı özelleştirmeler şunlardır: code.visualstudio.com/api/references/theme-color
Jeremy Moritz

17

Varsayılan bir temayı "düzenleyemezsiniz", bunlar "kilitlenmiştir"

Ancak, bunu tam olarak istediğiniz değişikliklerle kendi özel temanıza kopyalayabilirsiniz.

Daha fazla bilgi için şu makalelere bakın: https://code.visualstudio.com/Docs/customization/themes https://code.visualstudio.com/docs/extensions/install-extension#_your-extensions-folder

Değiştirmek istediğiniz tek şey C ++ kodunun renkleri ise, c ++ destek renklendiricisinin üzerine yazmaya bakmalısınız. Bununla ilgili bilgi için buraya gidin: https://code.visualstudio.com/docs/customization/colorizer

DÜZENLEME: Koyu tema burada bulunur: https://github.com/Microsoft/vscode/tree/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults

DÜZENLEME2: Açıklığa kavuşturmak için:


1
Ve nereden kopyalayabilirim? Bana gönderdiğiniz makalelerde bununla ilgili hiçbir şey yok. Ve sözdizimini biraz vurgulayarak değiştirmek gibi önemsiz bir şey için hiçbir şey yüklemek istemiyorum - özellikle de varsayılan tema kilitli değilse, doğru dosyayı açıp birkaç satır kodu değiştirebildiğimde. Ayrıca, Yeoman Generator ile yeni bir tema oluşturmak başka bir temanın .tmTheme dosyasına ihtiyaç duyar - ColorSublime web sitesinde Visual Studio dark teması yok ve VSC'den "kilitli olana" erişimim yok.
Toreno96

Belki c ++. Plist dosyasını "C: \ Program Files (x86) \ Microsoft VS Code \ resources \ app \ extensions \ cpp" konumundan düzenleyebilirim? Ama hangi kod bloklarını değiştirmeliyim? Ya da bir yerde VSC varsayılan karanlık temasının bir kaynak dosyası var, kendi özel temamı oluşturmak için kullanabilir miyim?
Toreno96

Düzenleyemezsiniz, çünkü kaynak kodda kaydedildiğine inanıyorum. Bununla birlikte, kopyalayabilir / yapıştırabilir ve birkaç satırı değiştirebilirsiniz. GitHub'da bulunur. Sizin için buldum: github.com/Microsoft/vscode/tree/… Bağlantıyla düzenlenmiş yanıt
Tobiah Zarlez

Bahsettiğim c ++. Plist dosyasını düzenlemek mümkün, kontrol ettim. Renklendiricilerle ilgili makaleden C ++ dili için standart bir renklendirme dosyası olduğunu anladım. Yanlışsam düzelt. Ama yine de varsayılan temayı düzenlemekten bahsediyorsanız - evet, bunu yapamayacağımı biliyorum, bununla ilgili cümleyi ilk cevabınızdan anladım. GitHub ve bağlantıdaki kaynak kodu hakkında bilgi için teşekkürler - ama kontrol ettim ve oradaki temalar varsayılan olanlar değil, değiştirilmiş, daha renkli varyasyonları. Maalesef istediğim bir şekilde değil.
Toreno96

1
Ancak kazara, uzantı galerisindeki "Xcodedefault" temasının varsayılan karanlık olanla aynı sözdizimine sahip olduğunu öğrendim. Artık diskimdeki uzantı klasöründe olduğu için, kurulumdan sonra, varsayılan koyu temayı değiştirmek istediğim gibi onu değiştirebilirim. Yani sorunum çözüldü.
Toreno96

15

En basit yol, kullanıcı ayarlarını düzenlemek ve workbench.colorCustomizations

Renk özelleştirmelerini düzenleme

Temanızı yapmak istiyorsanız

Mevcut tema ayarlarını kopyalayacak ve bir *.color-theme.jsonJSON5 dosyası olarak kaydetmenize izin verecek mevcut temayı değiştirme seçeneği de vardır.

Mevcut ayarlardan renk teması oluşturun


1
Önce daha iyi ve daha kolay cevap olması için cevabınızı yeniden sıralamak ister misiniz? =]
Yayınlanma tarihi

14

VS Code sürüm 1.12 veya üzeri bu ayarlar bölümünde herhangi bir renk teması değiştirilebilir:

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

Bkz. Https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme

Düzenlenebilecek mevcut değerler: https://code.visualstudio.com/docs/getstarted/theme-color-reference

DÜZENLEME: Sözdizimi renklerini değiştirmek için buraya bakın: https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_syntax-highlighting-colors ve buraya: https://www.sublimetext.com/docs/ 3 /cope_naming.html


Bununla, düzenleyicinin kendi renklerini geçersiz kılabilirsiniz, ancak bazı anahtar kelimelerin renklerini (ör: dizelerin rengi) geçersiz kılabilirsiniz.
Jhegs

7

Başkalarının da belirttiği gibi, settings.json dosyasındaki editor.tokenColorCustomizationsveya workbench.colorCustomizationsayarını geçersiz kılmanız gerekir . Burada Abyss gibi temel bir tema seçebilir ve yalnızca değiştirmek istediğiniz şeyleri geçersiz kılabilirsiniz. İşlev, dizi renkleri vb. Gibi çok az şeyi çok kolay bir şekilde geçersiz kılabilirsiniz.

Örneğin workbench.colorCustomizations

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

Örneğin editor.tokenColorCustomizations:

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

Ancak, varanahtar kelimenin rengini değiştirmek gibi derin özelleştirmeler , textMateRulesanahtarın altındaki geçersiz kılma değerlerini sağlamanızı gerektirecektir .

Örneğin, aşağıda:

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

Ayrıca temaları genel olarak geçersiz kılabilirsiniz:

"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"
            }
        }
    ]
}

Daha fazla ayrıntı burada: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide


5

MAC OS için Çözüm

Bu cevabın buraya uyup uymadığından emin değilim, ancak MAC kullanıcıları için bir çözüm paylaşmak istiyorum ve yeni bir soru başlatıp orada kendime cevap verirsem garip görünüyor.


VSCode tema yolunuzu aşağıdaki gibi arayın:

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

.json dosyasını açın ve değiştirmek için hedeflediğiniz stilleri arayın.
Benim durumumda, ben boşluk rengini işlemek değiştirmek istiyor
ve bunu olarak bulduk
"editorWhitespace.foreground"
böylece altında settings.jsonVisual Studio Kanununda,
(Ben Çalışma Alanı Ayarları yapmak) şu satırları ekledi

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

Çözümler şu adresten yönlendirilir: https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme


Unutma ⌘ Command+ Sgeçerlilik kazanması için Ayarlar kaydedilirken.


2

docs şimdi bu konuda bir bölüm var.

Temel olarak, komutu npmyüklemek yove çalıştırmak için kullanın yo codeve metin tabanlı küçük bir sihirbaz elde edersiniz - seçeneklerinden biri varsayılan karanlık şemanın bir kopyasını oluşturmak ve düzenlemek olacaktır.


2

Buraya temayı düzenlemenin bir yolunu bulmaya geldim, ancak Mac'imde bulamadım. Derin bir dalıştan sonra nihayet kurulum yerini buldum:

~/.vscode/extensions

Orada tüm uzantılar var!

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.