Visual Studio Codeステータスバーの色


回答:


189

ステータスバーの色を変更するには、次のコード行を追加してユーザー設定を編集します。

"workbench.colorCustomizations": {
    "statusBar.background" : "#1A1A1A",
    "statusBar.noFolderBackground" : "#212121",
    "statusBar.debuggingBackground": "#263238"
}

これは動的に実行できますか?const config2 = vscode.workspace.getConfiguration('workbench.colorCustomizations.statusBar'); config2.update('background', '#1A1A1A');何もしないようですか?
トムH

@TomH私はエキスパートではなく、「動的に」どのように実行されるかはよくわかりませんが、実行Object.assign(vscode.workspace.getConfiguration('workbench.colorCustomizations'), { "statusBar.background" : "#00FF00"})するとTypeErrorが発生し、読み取り専用プロパティに割り当てることができないことを通知します。そのため、getConfigurationメソッドを使用することは、正しい方法ではないと思います。
acesmndr

3
これは@acesmndrのおかげでうまく機能します。ここで説明されているように:code.visualstudio.com/docs/getstarted/…、この変更を次のように特定のユーザー設定ファイルのテーマに加えることもできます: "workbench.colorCustomizations":{"[Markdown Editor Dark]":{"statusBar .background ":"#1A1A1A "、" statusBar.noFolderBackground ":"#212121 "、" statusBar.debuggingBackground ":"#263238 "}}
Walton

本当に役立つ回答@acesmndr
Akhila

62

1)私のような初心者に30分の時間を節約します-これは、settings.jsonファイルで編集する必要があります。アクセスする最も簡単な方法は、[ファイル]-> [設定]-> [設定]で、[色]を検索し、[ワークベンチ:色のカスタマイズ]-> [settings.jsonで編集]オプションを選択します。

2)これは、「Gama11」によって提案されたソリューションを使用しますが、!note !: settings.jsonのコードの最終的な形式は次のようになります-「workbench.colorCustomizations」を囲む中括弧に注意してください:

{
  // fontSize just for testing purposes, commented out.
  //"editor.fontSize" : 12

  // StatusBar color:
     "workbench.colorCustomizations": {
     "statusBar.background" : "#303030",
     "statusBar.noFolderBackground" : "#222225",
     "statusBar.debuggingBackground": "#511f1f"
    }
}

上記のコードをコピーして貼り付けたら、Ctrl + Sを押して「settings.json」への変更を保存します。

ソリューションはここから適応されました:https : //code.visualstudio.com/api/references/theme-color


21

すべてのテーマが非常に異なるため、このような変更をグローバルに行うことはおそらく望ましくありません。代わりに、テーマごとに指定してください。例:

"workbench.colorCustomizations": {
    "[Some Theme Name]": {
        "statusBar.background" : "#486357",
        "statusBar.foreground" : "#c8e9c5",
    },
    "[Some Other Theme Name]": {
        "statusBar.background" : "#385357",
        "statusBar.foreground" : "#d7e9c4",
    }
},

そうすれば、お気に入りのテーマを切り替えるときに、それらのカスタマイズを忘れることがなく、そのコンテキストで意味をなすことになります。


2
複数のVSCodeインスタンスが開いているときに、これをワークスペース設定に適用して異なるプロジェクトを区別することも素晴らしいです。一つは、また、変更することができますtitleBar.activeBackgroundし、titleBar.activeForegroundそれがさらに明白にするために。
Qwerty、

他の回答と同様に、おそらくstatusBar.noFolderBackgroundand も設定する必要があることに注意してくださいstatusBar.debuggingBackground。そうしないと、影響を受けません。
ラピス

3

私の意見では、上記の回答よりも強力で堅牢な解決策があり、それは作業中のファイルに基づいてステータスバーの色を変更するものです。 これはColorTabs
と呼ばれ、正規表現のリストを提供して、それに基づいた色。

免責事項-拡張機能をお楽しみください!


素敵な拡張機能-正規表現をフルパスで機能させて、VSCodeで開いているすべてのプロジェクトを区別できるようにしたいと考えています。
cyberwombat

1
実際にはフルパス上にありましたが、相対パスに変更しました...たぶん構成できます
orepor

1
これは、ファイル名の代わりにブランチのタブの色を設定するのに適しています-その開発->緑、qa->オレンジ、マスター->赤、その他->デフォルトの場合?
ヨハンアスペリング

1
問題を解決する拡張を書いた人は、トップの投稿が言っていることを繰り返す他の投稿よりも投票数が少なくなっています。
a.anev

1

ステータスバーの色をからに戻すことができるように、control+shift+pvscodeを開いて入力open settings(UI)して検索しwindow.titleBarStyle、オプションをからnativeに変更するときに押します。customwhiteblack

重要な注意:この手法は、2019年2月にリリースされたvscodeの更新バージョン1.32で機能します。古いバージョンでは機能しない可能性があるため、vscodeを最新バージョン1.32以降に更新していることを確認してください。

スクリーンショットの例


7
ステータスバーとは関係のない質問には答えません
Gal Margalit

Galが上記で言ったように、タイトルバーステータスバーではありません—前者は上部にあり、後者は下部にあります
反覆

0

拡張子を編集して色を変更できます:

 "colors":{
        "statusBar.background": "#505050",
    },


0

これらは、ワークスペースのmacOSでVS Codeステータスバーの色を設定するために行った手順です(グローバルではありません)。

見る| コマンドパレット... | 「ワークスペース設定を開く(JSON)」を検索します

(これにより、プロジェクト[プロジェクト名] .code-workspaceファイルが開きます。)

色のカスタマイズを設定プロパティに追加します。

{
    "folders": [],
    "settings": {
        "workbench.colorCustomizations": {
            "statusBar.background": "#938e04",
            "statusBar.foreground": "#ffffff"
        }
    }
}

これは、VS Codeの複数のインスタンスを開いていて、グローバルテーマを変更せずに各ウィンドウを視覚的に区別したい場合に非常に便利です。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.