- 複数のプロジェクトを同時に扱っていて、視覚的に区別したい方
- Cursorのカスタマイズ機能をもっと活用したい方
- 作業効率を上げるための環境設定に興味がある方
こんにちは、zawato（@zawato7）です！
複数のプロジェクトを同時に開いていて、どのウィンドウがどのプロジェクトか混乱したことはありませんか？
コードを編集しようとして、間違ったプロジェクトを開いてしまった経験はないでしょうか？
この記事では、Cursorエディタでワークスペースごとに異なる色をカスタマイズする方法を解説します。設定ファイルの編集方法から、おすすめのカラースキームまで詳しく紹介します。
この記事を読むと、視覚的に各プロジェクトを区別できるようになり、作業効率が向上します。また、Cursorの隠れた設定機能を知ることで、より快適な開発環境を構築できるようになります。
環境
- macOS
- Cursorバージョン：1.1.6
配色テーマの変更
- 左上のメニューバーの「Cursor」をクリック
- 「基本設定」の「テーマ」の「配色テーマ」をクリック
- 配色テーマの中から、「Dark (Visual Studio)」を選択
各種カラーの変更
- 左上のメニューバーの「Cursor」をクリック
- 「基本設定」の「設定」をクリック
- 「ワークスペース」タブを開く
- 「Color Customizations」の「settings.jsonで編集」をクリック
- 「workbench.colorCustomizations」の中に設定値を記載することで任意の色に変更できる
| titlebBar | Cursor上部のタイトルバー |
| statusBar | Cursor下部のステータスバー |
| editor | エディタ全体 |
| tab | タブ |
| activityBar | Cursor左部のアクティビティバー |
基本的にはVSCodeと同じように設定できます。
そのほかの設定項目については、公式ドキュメントを参照してください。
Cursorのおすすめテーマ一覧
Cursorは VSCode の拡張テーマをそのまま使えます。以下は人気の高いテーマです。
| テーマ名 | 特徴 | 向いている人 |
|---|---|---|
| One Dark Pro | 落ち着いたダークテーマ。視認性が高くコントラストのバランスが良い | 長時間作業・目が疲れやすい人 |
| Dracula Official | 紫・ピンク系のダークテーマ。鮮やかで見やすい | カラフルな配色が好みの人 |
| GitHub Dark | GitHubと同じ配色。使い慣れている人が多い | GitHubをよく使う人 |
| Tokyo Night | ブルー系ダーク。落ち着いた夜間作業向け | 夜中心に作業する人 |
| Catppuccin | パステル系でやわらかい印象。ライト・ダーク両対応 | 柔らかい配色が好きな人 |
| Solarized Light | 明るい背景・高コントラスト。デイタイム作業向け | 昼間・明るい環境で作業する人 |
インストール方法：拡張機能パネル（Ctrl+Shift+X）でテーマ名を検索 → インストール → 配色テーマから選択。
settings.jsonで色を変更するコード例
ワークスペースの .vscode/settings.json に以下を追記すると、そのプロジェクト専用の色になります。
プロジェクトA（ブルー系）の例
{
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#003366",
"titleBar.activeForeground": "#ffffff",
"statusBar.background": "#003366",
"statusBar.foreground": "#ffffff",
"activityBar.background": "#002244"
}
}
プロジェクトB（グリーン系）の例
{
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#1a4731",
"titleBar.activeForeground": "#ffffff",
"statusBar.background": "#1a4731",
"statusBar.foreground": "#ffffff",
"activityBar.background": "#143d27"
}
}
➡ タイトルバーとステータスバーだけ変えると、ウィンドウを切り替えた瞬間にどのプロジェクトか一目でわかります。
主要な色設定キー一覧
| キー | 変更される場所 |
|---|---|
titleBar.activeBackground | タイトルバーの背景色 |
titleBar.activeForeground | タイトルバーの文字色 |
statusBar.background | ステータスバー（下部）の背景色 |
statusBar.foreground | ステータスバーの文字色 |
activityBar.background | 左側アクティビティバーの背景色 |
editor.background | エディタ本文の背景色 |
sideBar.background | ファイルツリー部分の背景色 |
全設定キーの一覧は VSCode公式ドキュメント（Theme Color） を参照してください。
おわりに
今回は、Cursorエディタでワークスペースごとに異なる色をカスタマイズする方法と、おすすめテーマを解説しました。
ワークスペースごとに色を変えることで、作業効率が向上するだけでなく、開発体験も楽しくなります。
ぜひ自分好みのカラーカスタマイズを試してみてください！
感想などありましたら、是非コメントしてください！
お問い合わせは、こちら！
コメント