LoginSignup
140

More than 3 years have passed since last update.

Visual Studio Codeエディタの色をプロジェクトごとに違うものにする

Last updated at Posted at 2018-12-24

Visual Studio Codeで複数のプロジェクトを開いている時,「どれが作業対象だっけ?」となることが多かったので,エディタの色をプロジェクトごとに違うものにしてみます.

Before:

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3139383130382f64376664316539662d393435352d616431632d316235362d3465303439386664633465302e706e67.png

After:

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3139383130382f63313030333937352d346136322d326539322d626230312d3630326534396237353936382e706e67 (1).png

効果

  • 作業対象のプロジェクトのウインドウを簡単に発見できます.

確認環境

  • MacBook Pro (16-inch, 2019)
  • macOS Catalina 10.15.7
  • Visual Studio Code 1.51.1

手順

プロジェクトルートに.vscode/ディレクトリを作成し,settings.jsonファイルに下記のように追記します(ファイルがすでに存在する場合,既存のファイルに追記してください).

{
    "workbench.colorCustomizations": {
        "titleBar.activeBackground": "#FFD700",
        "titleBar.activeForeground": "#000000",
        "activityBar.background": "#FFD700",
        "activityBar.foreground": "#000000"
    }
}

結果

色がつきました.

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3139383130382f33613132313236612d313736312d356462652d346533622d3033366336306162303234652e706e67.png

簡単に発見することができます.他のプロジェクトのエディタ色には影響しません.

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3139383130382f63313030333937352d346136322d326539322d626230312d3630326534396237353936382e706e67 (1).png

プロジェクトごとにテーマカラーを決めて,チームに一体感を出すのにも使えるかもしれません.

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3139383130382f64383362316231372d306231352d393438642d336638322d3533363338343632366238382e706e67.png

以上です.

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
140