VSCodeの背景色を変更する方法【3つの手順で簡単カスタマイズ】

プログラミング・IT

プログラミングをしていると、長時間画面を見続けることになりますよね。そんなときに「この背景色、もうちょっと目に優しい色にできないかな？」と思ったことはありませんか？

Visual Studio Code（VSCode）なら、背景色を簡単に変更できます。明るいテーマから暗いテーマまで、あなたの好みに合わせて自由にカスタマイズ可能です。

この記事では、VSCodeの背景色を変更する3つの方法を、初心者の方にもわかりやすく解説していきます。

スポンサーリンク

VSCodeの背景色を変更する3つの方法

VSCodeの背景色や配色を変更する方法は、大きく分けて3つあります。

1. 配色テーマを変更する（最も簡単）

すでに用意されているテーマから選ぶだけで、一瞬で雰囲気が変わります。プログラミング初心者の方や、手っ取り早く変更したい方におすすめです。

2. settings.jsonファイルで細かくカスタマイズ

エディタの背景色だけでなく、サイドバーやステータスバーなど、各部分の色を個別に設定できます。自分だけのオリジナル配色を作りたい方向けの方法です。

3. プロジェクトごとに異なる配色を設定

複数のプロジェクトで作業している場合、プロジェクトごとに背景色を変えられます。「このプロジェクトは青系、あっちは緑系」といった使い分けが可能です。

それでは、それぞれの方法を詳しく見ていきましょう。

方法1：配色テーマを変更する【一番簡単】

配色テーマを変更するのが、最もシンプルで早い方法です。VSCodeには最初から複数のテーマが用意されているので、その中から好みのものを選べます。

メニューから変更する手順

Windowsの場合：

  1. 画面上部の「ファイル」メニューをクリック
  2. 「ユーザー設定」を選択
  3. 「テーマ」をクリック
  4. 「配色テーマ」を選択

macOSの場合：

  1. 画面上部の「Code」メニューをクリック
  2. 「基本設定」を選択
  3. 「設定」をクリック
  4. 「配色テーマ」を選択

すると、配色テーマの一覧が表示されます。矢印キーで上下に移動すると、リアルタイムでプレビューが表示されるので、実際の見た目を確認しながら選べます。

キーボードショートカットで素早く変更

もっと素早く変更したい場合は、キーボードショートカットが便利です。

  • Windows/Linux: Ctrl + K を押したあと、すぐに Ctrl + T
  • macOS: Command + K を押したあと、すぐに Command + T

このショートカットを使えば、一発で配色テーマ選択画面が開きます。

標準で用意されているテーマの種類

VSCodeには、明るいテーマ（ライトテーマ）と暗いテーマ（ダークテーマ）の両方が用意されています。

ライトテーマ（明るい背景）：

  • Light+（デフォルトライト）
  • Light（Visual Studio）
  • Quiet Light
    など5種類程度

ダークテーマ（暗い背景）：

  • Dark+（デフォルトダーク）
  • Monokai
  • Solarized Dark
    など10種類程度

デフォルトでは「Dark+（Default Dark+）」というダークテーマが選択されています。

追加のテーマをインストールする方法

標準のテーマで満足できない場合は、世界中の開発者が作った何千ものテーマを追加できます。

  1. 配色テーマ選択画面を開く
  2. 「その他の配色テーマを参照」をクリック
  3. 拡張機能マーケットプレイスが開く
  4. 好きなテーマを選んでインストール

人気のテーマには、「One Dark Pro」「Dracula」「Material Theme」「Night Owl」などがあります。テーマは常に新しいものが公開されているので、定期的にチェックしてみるのも楽しいですよ。

方法2：settings.jsonで細かくカスタマイズする

テーマ全体を変えるのではなく、「エディタの背景色だけ変えたい」「サイドバーの色を自分好みにしたい」といった細かい調整をしたい場合は、settings.jsonファイルを編集します。

settings.jsonファイルを開く方法

コマンドパレットから開く手順：

  1. コマンドパレットを開く
  • Windows/Linux: Ctrl + Shift + P
  • macOS: Command + Shift + P
  1. 「Preferences: Open User Settings (JSON)」と入力（または「settings.json」で検索）
  2. settings.jsonファイルが開く

設定画面から開く手順：

  1. 設定画面を開く
  • Windows/Linux: Ctrl + , （カンマ）
  • macOS: Command + , （カンマ）
  1. 検索ボックスに「color customizations」と入力
  2. 「Workbench: Color Customizations」の項目を探す
  3. 「Edit in settings.json」のリンクをクリック

エディタの背景色を変更する

settings.jsonファイルに以下のコードを追加します。

{
  "workbench.colorCustomizations": {
    "editor.background": "#1e1e1e"
  }
}

#1e1e1eの部分が色を表すカラーコードです。この値を変更することで、好きな色に変えられます。

カラーコードの形式：

  • #RGB（3桁）
  • #RGBA（4桁）
  • #RRGGBB（6桁）
  • #RRGGBBAA（8桁・透明度付き）

例えば：

  • 黒：#000000
  • 白：#ffffff
  • 濃いグレー：#1e1e1e
  • 明るいグレー：#f8f8ff

カラーコードは、Googleで「カラーピッカー」と検索すると、視覚的に色を選べるツールが使えます。

その他のカスタマイズできる要素

エディタの背景色以外にも、さまざまな部分の色を変更できます。

{
  "workbench.colorCustomizations": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "activityBar.background": "#2c2c2c",
    "statusBar.background": "#007acc",
    "titleBar.activeBackground": "#3c3c3c",
    "sideBar.background": "#252526"
  }
}

主なカスタマイズ項目：

  • editor.background: エディタの背景色
  • editor.foreground: エディタの文字色
  • activityBar.background: 左端のアクティビティバーの背景色
  • statusBar.background: 下部のステータスバーの背景色
  • titleBar.activeBackground: 上部のタイトルバーの背景色
  • sideBar.background: サイドバーの背景色
  • editorLineNumber.foreground: 行番号の色
  • editor.selectionBackground: 選択範囲の背景色

設定可能な項目は数百種類あります。詳しくは、VSCodeの公式ドキュメント「Theme Color Reference」で確認できます。

特定のテーマだけカスタマイズする

複数のテーマを使い分けている場合、特定のテーマにのみカスタマイズを適用することもできます。

{
  "workbench.colorCustomizations": {
    "[Dark+ (default dark)]": {
      "editor.background": "#1a1a1a"
    },
    "[Light+ (default light)]": {
      "editor.background": "#fafafa"
    }
  }
}

このように設定すると、Dark+テーマのときだけ濃い背景色になり、Light+テーマのときは明るい背景色になります。

方法3：プロジェクトごとに配色を変える

複数のプロジェクトで作業していて、「プロジェクトAは青系、プロジェクトBは緑系」といった使い分けをしたい場合は、ワークスペース設定を使います。

ワークスペース設定とは

ワークスペース設定は、特定のプロジェクト（フォルダ）だけに適用される設定です。この設定はプロジェクトフォルダ内の .vscode/settings.json ファイルに保存されます。

ワークスペース設定で背景色を変更する手順

  1. VSCodeでプロジェクトフォルダを開く
  2. 設定画面を開く（Ctrl + , または Command + ,）
  3. 上部のタブで「ワークスペース」を選択
  4. 「color」で検索し、「Workbench > Appearance」をクリック
  5. 「Workbench: Color Customizations」の「Edit in settings.json」をクリック
  6. .vscode/settings.json ファイルが開くので、以下のように記述
{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#007acc",
    "titleBar.activeForeground": "#ffffff",
    "statusBar.background": "#007acc",
    "statusBar.foreground": "#ffffff"
  }
}

この設定をGitで管理すれば、チームメンバー全員が同じ配色でプロジェクトを開けます。

ただし、プロジェクトごとの配色設定をGit管理したくない場合は、.gitignore ファイルに .vscode/settings.json を追加しておきましょう。

よくある質問

背景色を変更しても反映されないときは？

settings.jsonファイルの記述にエラーがある可能性があります。以下の点をチェックしてください：

  • カンマの付け忘れ・付けすぎがないか
  • カッコ（{ }）が正しく閉じられているか
  • カラーコードが正しい形式か（#で始まっているか）
  • JSONの構文エラーがないか

VSCodeはエラーがある行に赤い波線を表示してくれるので、その部分を修正すれば解決します。

設定をデフォルトに戻したい

配色をデフォルトに戻すには、settings.jsonから追加した workbench.colorCustomizations の部分を削除するか、設定画面で各項目の歯車アイコンから「Reset Setting」を選択します。

全ての設定をリセットしたい場合は、settings.jsonファイルの中身を全て削除（{}だけ残す）すれば、VSCodeの初期状態に戻ります。

目に優しい配色にするには？

長時間作業する場合は、以下のポイントを意識すると目の疲れを軽減できます：

  • ダークテーマを使う: 暗い背景は目への負担が少ないとされています
  • コントラストを適度に: 白黒のコントラストが強すぎると疲れやすくなります
  • ブルーライトを抑える: 青みの強い色より、茶色や黄色がかった色の方が目に優しい傾向があります

人気のある目に優しいテーマには、「One Dark Pro」「Night Owl」「Dracula」などがあります。

まとめ

VSCodeの背景色変更は、主に3つの方法で行えます：

  1. 配色テーマを変更する: 最も簡単で手っ取り早い方法
  2. settings.jsonでカスタマイズ: 細かい調整が可能
  3. ワークスペース設定: プロジェクトごとに異なる配色を設定

まずは既存のテーマから好みのものを探してみて、さらにこだわりたくなったらsettings.jsonでの細かい調整に挑戦してみてください。

自分に合った配色で作業することで、コーディングの効率も快適さも大きく変わりますよ。

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました