VS Code テーマのインストールとカスタマイズ方法

Visual Studio Code の外観は、コーディング体験に直接影響を与えます。適切に選択されたテーマは、長時間のセッション中の目の疲れを軽減し、構文エラーをより早く発見できるようにし、ワークスペースを自分らしいものにします。VS Code にはしっかりとしたデフォルトが付属していますが、テーマのインストールとカスタマイズ方法を理解することで、汎用的なエディタを個人に最適化された開発環境に変えることができます。

VS Code Marketplace からのテーマのインストール

新しい外観への最も簡単な方法は、拡張機能パネルから始まります。サイドバーの拡張機能アイコンをクリック(または Ctrl+Shift+X / Cmd+Shift+X を押下)し、「theme」を検索して利用可能なオプションを閲覧します。VS Code Marketplace には、ミニマリストデザインから鮮やかな高コントラストオプションまで、数千のテーマがホストされています。

気に入ったテーマが見つかったら、インストールをクリックします。VS Code は即座にそれを利用可能なテーマに追加します。コマンドパレット(Ctrl+Shift+P / Cmd+Shift+P)を使用して「Preferences: Color Theme」と入力することで、インストール済みテーマを切り替えることができます。これにより、すべてのテーマがプレビューリストに表示され、矢印キーで移動するとエディタの変更が即座に確認できます。

人気のある出発点には、馴染みのある構文ハイライトのための GitHub 公式テーマや、Atom から移行する人向けの One Dark Pro などがあります。これらの確立されたテーマは、さまざまなファイルタイプで適切に機能する洗練された配色を提供します。

VS Code のテーマアーキテクチャの理解

VS Code テーマは2つの異なる領域を制御します:ワークベンチカラー(サイドバー、タブ、ステータスバーなどの UI 要素)と構文カラー(コードハイライト)です。この分離により、要素を組み合わせることができます—テーマの構文カラーを維持しながら、好みに合わせてインターフェースを調整できます。

すべてのテーマは本質的に JSON に保存された色定義のコレクションです。テーマを選択すると、VS Code はこれらの色ルールをさまざまなインターフェース要素とコードトークンに適用します。このモジュラーアプローチにより、テーマをゼロから構築する必要なく、VS Code のカスタマイズが非常に柔軟になります。

設定によるテーマのカスタマイズ

テーマ調整の真の力は、VS Code の設定にあります。テーマファイルを直接変更する代わりに、settings.json で特定の色をオーバーライドします。このアプローチにより、アップデート後もカスタマイズが保持され、マシン間での変更の移植が容易になります。

ワークベンチカラーのカスタマイズ

UI 要素を調整するには、設定に workbench.colorCustomizations ブロックを追加します:

{
  "workbench.colorCustomizations": {
    "editor.background": "#1a1a1a",
    "sideBar.background": "#252525",
    "activityBar.background": "#2a2a2a"
  }
}

これらの変更は、すべてのテーマにグローバルに適用されます。特定のテーマをターゲットにするには、テーマ名を含む括弧でカスタマイズをラップします:

{
  "workbench.colorCustomizations": {
    "[One Dark Pro]": {
      "editor.background": "#1a1a1a"
    }
  }
}

トークンカラーのカスタマイズ

構文ハイライトの調整は、editor.tokenColorCustomizations を通じて同様に機能します。コメントや文字列などの広範なカテゴリを変更できます:

{
  "editor.tokenColorCustomizations": {
    "comments": "#608B4E",
    "strings": "#CE9178",
    "functions": "#DCDCAA"
  }
}

きめ細かい制御には、textMateRules の下で TextMate スコープを使用します。これにより、特定の言語構造をターゲットにできます:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "keyword.control",
        "settings": {
          "foreground": "#C586C0",
          "fontStyle": "italic"
        }
      }
    ]
  }
}

実用的なテーマ調整戦略

80%適切なテーマから始めて、残りの20%を洗練させます。一般的な調整には、コントラストを向上させるための背景の暗色化、可読性を向上させるためのコメントの明色化、視覚的階層のためのキーワードへのイタリック体スタイルの追加などがあります。

コマンドパレットの「Developer: Inspect Editor Tokens and Scopes」コマンドは、任意のコード要素の正確なスコープ名を明らかにします。任意の構文にカーソルを合わせ、このコマンドを実行すると、VS Code は設定でターゲットにする必要がある TextMate スコープを表示します。

異なるプロジェクトにはワークスペース固有のカスタマイズを検討してください。高コントラストテーマは、ネストされた HTML が多いフロントエンド作業に適しているかもしれませんが、控えめなテーマは長い Python セッションに適しています。VS Code のワークスペース設定により、プロジェクトごとにこれらの設定を維持できます。

ライトモードとダークモードの動作

VS Code はデフォルトでシステムのテーマ設定を尊重します。window.autoDetectColorScheme 設定により、OS 設定に基づいてライトテーマとダークテーマを自動的に切り替えることができます。各モードの優先テーマを定義します:

{
  "window.autoDetectColorScheme": true,
  "workbench.preferredDarkColorTheme": "One Dark Pro",
  "workbench.preferredLightColorTheme": "GitHub Light"
}

この設定により、照明条件や時間帯が変わったときの手動でのテーマ切り替えが不要になります。

まとめ

VS Code テーマは、単なる外観の変更以上のものを提供します—快適で生産的なコーディング環境を作成するためのツールです。インスピレーションのためにマーケットプレイスのテーマから始め、VS Code の組み込みカスタマイズオプションを使用して、完全には適合しない色を微調整します。高品質なベーステーマときめ細かいカスタマイズコントロールの組み合わせにより、作業を遅らせたり目を疲れさせたりするデフォルトに固執する必要はありません。理想的なセットアップは、わずかな設定で実現できます。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.