Visual Studio Codeのデフォルトのダークテーマを編集するにはどうすればよいですか？

88

私はWindows764ビットを使用しています。

Visual Studio Codeでデフォルトのダークテーマを編集する方法はありますか？では%USERPROFILE%\.vscode、フォルダの拡張機能からの唯一のテーマはインストールパスに（私はデフォルトを使用し、一方で、あるC:\Program Files (x86)\Microsoft VS Code）そこにはいくつかの標準的なテーマのファイルである\resources\app\extensionsKimbieダーク、Solarizedダーク/ライトのような、またはMonokaiの変異体が、デフォルトの暗いテーマはありません。

しかし、結局それを編集する可能性がある場合、C ++言語のオブジェクトのメンバー、ポインターのメンバー、クラスと構造体の名前の原因となるコードのブロックはどれですか？

themes  visual-studio-code 
— トレノ96
ソース
4
ここに来る人のために：テーマファイルを探したり、変更したり、作成したりする必要はありません。code.visualstudio.com/docs/getstarted/…を使用workbench.colorCustomizationsしてeditor.tokenColorCustomizations、ユーザー設定ですべてを変更できます。
— chipit24 2018
古いものを我慢することもできAtoms Edit -> Stylesheet...ますが、問題の最後の変更は3月のgithub.com/Microsoft/vscode/issues/459のように、カスタムグローバルCSSを追加できる機能に取り組んでいます。コメントのために閉鎖されているのは残念です。現在のAPIでは、拡張機能でグローバルCSSを変更することはできません。そのため、待つか、CSSをcavemanなどの開発ツールに手動で貼り付ける必要があります。
— レイ・フォス

回答:

47

あなたが探しているファイルは、

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

Windowsでファイル名dark_vs.jsonを検索し、他のシステムでファイル名を見つけます。

更新：

新しいバージョンのVSCodeでは、テーマをカスタマイズするために設定ファイルを探す必要はありません。これで、workbench.colorCustomizationsとeditor.tokenColorCustomizationsユーザー設定を使用してカラーテーマをカスタマイズできます。この問題に関するドキュメントはここにあります。

— パーランディカ
ソース
11
Linuxでは、それがでます/usr/share/code/resources/app/extensions/theme-defaults/themes
— sigalor
1
アーチLinuxでは、それは（オープン・ソース・リリース）にだ/usr/lib/code/extensions/theme-defaults/themes
— hendalst
3
デフォルトでは、VSのコードは、Cにインストールされています：\ユーザー\ {ユーザー名} \のAppData \ローカル\プログラム\マイクロソフトVSコード
— ToivoSäwén
2
この回答の更新は適切な推奨事項です。テーマファイルを直接編集すると、VSCodeの更新時に上書きされる可能性があることがわかりました。
— cniggeler
73

VSコードの「ユーザー設定」では、次のタグを使用して表示色を編集できます（これはサンプルであり、さらに多くのタグがあります）。

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

一部のC ++カラートークンを編集する場合は、次のタグを使用します。

"editor.tokenColorCustomizations": {
    "numbers": "#2247EB",
    "comments": "#6D929C",
    "functions": "#0D7C28"
}
— Chethaka Uduwarage
ソース
1
しかし、tokenColorCustomizationsを超えている場合は、どうすればよいですか？
— アレックス
「editor.tokenColorCustomizations」で利用可能なすべてのオプションのリストはどこにありますか？
— ololobus
2
— ololobus
私の編集は何らかの理由で拒否されましたが、特定のテーマを変更したいというOPの要望に具体的に対処するために、テーマのファイルを変更せずにテーマを指定して色を変更できます： "workbench.colorCustomizations"：{"[Kimbie Dark]" ：{ "activityBar.foreground"： "＃1 472c0cは"}}
— aamarks
設定では「ワークベンチ：色のカスタマイズ」と呼ばれています
— Zach Saucier
29

テーマに関しては、VSCodeはSublimeと同じくらい編集可能です。VSコードに付属しているデフォルトのテーマを編集できます。テーマファイルの場所を知っている必要があります。

補足：私はモノカイのテーマが大好きです。しかし、私が変えたかったのは背景だけでした。濃い灰色がかった背景は好きではありません。代わりに、黒一色の背景の方がコントラストがはるかに優れていると思います。コードはさらに飛び出します。

とにかく、私はテーマファイルを探して、それを（Windowsで）見つけました：

c：\ Program Files（x86）\ Microsoft VS Code \ resources \ app \ extensions \ theme-monokai \ themes \

そのフォルダーで、Monokai.tmThemeファイルを見つけ、最初のバックグラウンドキーを次のように変更しました。

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

テーマファイルにはいくつかの「背景」キーがあります。正しいものを編集してください。私が編集したものは一番上にありました。12行目だと思います。

— iviouse
ソース
5
Ubuntuのインストール場所は次のようになります/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_vs.json
— Max
5
Macの場合、次のパスのファイルの更新が機能していることがわかりました：/Users/user-name/.vscode/extensions/azemoh.one-monokai-0.3.3/themes/OneMonokai-color-theme.jsoncmd + shift + pそしてreload windowcmdと入力して、変更をすぐに試してください:)
— balajikris 2017
1
テーマの背景の変更は、"workbench.colorCustomizations": { "[Theme You Want to Update]": { "editor.background": "#000000" }ユーザー設定で行うことも できます。
— ビルボ
1
Windows上の64ビットVSコードの場合、ベースパスはC:\Program Files\Microsoft VS Code\resources\app\extensions\ 、通常、その後に続きますtheme-....
— Peter B
を使用して、ユーザー設定のテーマを変更します"workbench.colorCustomizations": { "editor.background": "#000" },。ここにあなたが作ることができるすべての異なるカスタマイズは以下のとおりです。code.visualstudio.com/api/references/theme-color
— ジェレミー・モリッツ
17

デフォルトのテーマを「編集」することはできません。それらは「ロックイン」されています

ただし、必要に応じて正確に変更して、独自のカスタムテーマにコピーすることができます。

詳細については、次の記事を参照してください：https ： //code.visualstudio.com/Docs/customization/themes https://code.visualstudio.com/docs/extensions/install-extension#_your-extensions-folder

変更したいのがC ++コードの色だけである場合は、c ++サポートカラーライザーの上書きを検討する必要があります。詳細については、https： //code.visualstudio.com/docs/customization/colorizerにアクセスしてください。

編集：ダークテーマはここにあります：https：//github.com/Microsoft/vscode/tree/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults

EDIT2：明確にするために：

— トビア・ザーレス
ソース
1
そして、どこからコピーできますか？あなたが私に送った記事にはそれについて何もありません。また、構文の強調表示を少し変更するなどの些細なことのために何もインストールしたくありません。特に、デフォルトのテーマがロックされていない場合に、適切なファイルを開いて数行のコードを変更できる場合はなおさらです。さらに、Yeoman Generatorを使用して新しいテーマを生成するには、別のテーマの.tmThemeファイルが必要です。ColorSublimeWebサイトにVisual Studioダークテーマがなく、VSCから「ロックされたテーマ」にアクセスできません。
— toreno96 2016
「C：\ ProgramFiles（x86）\ Microsoft VS Code \ resources \ app \ extensions \ cpp」からc ++。plistファイルを編集できるかもしれません。しかし、どのコードブロックを変更する必要がありますか？または、VSCのデフォルトのダークテーマのソースファイルがどこかにあり、それを使用して独自のカスタムテーマを作成できますか？
— toreno96 2016
ソースコード内に保存されていると思いますので、編集できません。ただし、コピーして貼り付けて、数行を変更することはできます。GitHubにあります。私はあなたのためにそれを見つけました：github.com/Microsoft/vscode/tree/… リンク付きの編集された回答
— Tobiah Zarlez 2016
私が言及したc ++。plistファイルを編集することは可能です、私はそれをチェックしました。そして、colorizersに関する記事から、C ++言語の標準のcolorizerファイルであることがわかりました。私が間違っている場合は私を訂正してください。しかし、あなたがまだデフォルトのテーマの編集について話しているなら-はい、私はそれができないことを知っています、私はあなたの最初の答えからそれについての文章を理解しました。GitHubとリンクのソースコードに関する情報をありがとう-しかし、私はチェックし、そこからのテーマはデフォルトのものではなく、これらの変更された、よりカラフルなバリエーションです。残念ながら、私が望む方法ではありません。
— toreno96 2016
1
しかし、偶然にも、拡張ギャラリーの「Xcodedefault」テーマは、デフォルトの暗いテーマと同じ構文で強調表示されていることがわかりました。現在はディスクの拡張フォルダにあるため、インストール後、デフォルトのダークテーマを変更したいのと同じように変更できます。だから、私の問題は解決されました。
— toreno96 2016
15

最も簡単な方法は、ユーザー設定を編集してカスタマイズすることです workbench.colorCustomizations

色のカスタマイズの編集

テーマを作りたいなら

現在のテーマ設定をコピーして*.color-theme.jsonJSON5ファイルとして保存できるようにする現在のテーマを変更するオプションもあります

現在の設定からカラーテーマを生成する

— ジェイウィック
ソース
1
より良い、より簡単な答えが最初になるようにあなたの答えを並べ替えたいですか？=]
— リリース
14

VS Codeバージョン1.12以降のこの設定セクションでは、任意のカラーテーマを変更できます。

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

https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-themeを参照してください

編集可能な値：https：//code.visualstudio.com/docs/getstarted/theme-color-reference

編集：構文の色を変更するには、https：//code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_syntax-highlighting-colorsおよびここ：https：//www.sublimetext.com/docs/を参照してください。 3 / scope_naming.html

— 必要なもの
ソース
これにより、エディター自体の色をオーバーライドできますが、一部のキーワードの色はオーバーライドできません（例：strings color）。
— Jhegs 2017
6

他の人が述べているように、settings.jsonファイルのeditor.tokenColorCustomizationsまたはworkbench.colorCustomizations設定をオーバーライドする必要があります。ここでは、Abyssなどの基本テーマを選択し、変更したいものだけをオーバーライドできます。関数や文字列の色など、ごくわずかなものを非常に簡単にオーバーライドできます。

例： workbench.colorCustomizations

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

例editor.tokenColorCustomizations：

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

ただし、varキーワードの色を変更するなどの詳細なカスタマイズでは、textMateRulesキーの下にオーバーライド値を指定する必要があります。

以下の例：

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

テーマ間でグローバルにオーバーライドすることもできます。

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

詳細はこちら：https：//code.visualstudio.com/api/language-extensions/syntax-highlight-guide

— ヴァルン・アチャール
ソース
5

MACOSのソリューション

この答えがここに適しているかどうかはわかりませんが、MACユーザー向けの解決策を共有したいと思います。新しい質問を始めて、そこで自分自身に答えると、厄介に見えます。


以下のようなVSCodeテーマパスを探します。

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

.jsonファイルを開き、変更するターゲットスタイルを探します。
私の場合、空白のレンダリングの色を変更したいのですが、Visual Studio Codeでそのように
見つけた
"editorWhitespace.foreground"
ので、次の行を追加しました（ワークスペース設定で行います）。settings.json

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

https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-themeからガイドされるソリューション


⌘ Command+S設定を保存して有効にすることを忘れないでください。

— elliotching
ソース
2

ドキュメントは、今このことについて全体のセクションを持っています。

基本的に、を使用npmしyoてコマンドをインストールして実行するyo codeと、小さなテキストベースのウィザードが表示されます。そのオプションの1つは、デフォルトのダークスキームのコピーを作成および編集することです。

— LeeGee
ソース
1

テーマを編集する方法を見つけるためにここに来ましたが、Macでは見つかりませんでした。深く掘り下げた後、ついにインストール場所を見つけました：

~/.vscode/extensions

そこにあるすべての拡張機能！

— コードノックス
ソース
この答えは良いです、それは不当に反対票を投じられました。
— ポリメラーゼ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.