この記事の要点

VS Code: Ctrl+K Ctrl+T でテーマ選択ピッカーが開く（最速） IntelliJ / JetBrains 系: Settings → Appearance & Behavior → Appearance → Theme Eclipse: Window → Preferences → General → Appearance、ダーク化は Eclipse Color Theme プラグイン併用が定番 配色だけでなく エディタ用の Color Theme とウィンドウ全体の UI テーマは分けて設定する チーム共有は VS Code: Settings Sync、JetBrains: Settings Repository / Settings Sync、Eclipse: oomph または epf エクスポート コントラスト不足で目が疲れる場合は High Contrast テーマまたは editor.fontFamily の見直しも併用

テーマ変更の目的

IDE のテーマ変更は単なる見た目の話ではなく、長時間コーディング時の眼精疲労軽減、シンタックスハイライトの可読性向上、登壇・スクリーンシェア時の視認性に直結します。本記事では Eclipse / IntelliJ (JetBrains 系) / VS Code の 3 大 IDE のテーマ変更方法と、チームでの設定共有方法をまとめます。

VS Code のテーマ変更

VS Code は最も手軽です。ショートカット一発で切り替え画面が出ます:

# カラーテーマ選択
Ctrl + K, Ctrl + T   (macOS: Cmd + K, Cmd + T)

# 一覧から ↑↓ で選ぶとリアルタイムにプレビューされる
# Enter で確定、Esc で元に戻す

# ファイルアイコンテーマ
Ctrl + K, Ctrl + I (File Icon Theme)

settings.json から直接指定することもできます:

{
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.preferredDarkColorTheme": "One Dark Pro",
  "workbench.preferredLightColorTheme": "Default Light+",
  "window.autoDetectColorScheme": true,
  "editor.fontFamily": "'JetBrains Mono', 'Cascadia Code', Consolas, monospace",
  "editor.fontLigatures": true
}

定番テーマ: One Dark Pro / Dracula Official / GitHub Theme / Night Owl / Material Theme。拡張機能 Marketplace で「theme」検索すると数千件出るので、まずは Trending から選ぶのが無難です。

IntelliJ / JetBrains 系 (PhpStorm, PyCharm, WebStorm 等) のテーマ変更

JetBrains 系 IDE は全製品で共通の手順です:

1. Ctrl + Alt + S (macOS: Cmd + ,) で Settings を開く
2. Appearance & Behavior → Appearance → Theme
3. 標準では Darcula / Dark / Light / High Contrast から選択
4. Editor → Color Scheme でエディタ部分の配色を別途調整

プラグインで増やす場合は Settings → Plugins から検索:

プラグイン	特徴
Material Theme UI	Material Design 風。UI 全体を一新
One Dark Theme	Atom 由来の定番ダークテーマ
Dracula Theme	クロスエディタの定番
Monokai Pro	Sublime 由来の暖色系
Nord	北欧寒色系。落ち着いた青基調

Eclipse のテーマ変更

Eclipse は標準でダークテーマがあるものの、エディタ部分は別途調整が必要です:

1. Window → Preferences → General → Appearance
2. Theme で Dark / Light / System を選択
3. エディタ配色は General → Appearance → Colors and Fonts で個別調整
4. これだけだとエディタが白いまま → Eclipse Color Theme プラグインを Marketplace から導入

# Eclipse Color Theme のインストール
Help → Eclipse Marketplace → "Color Theme" 検索 → Install

# インストール後
Window → Preferences → General → Appearance → Color Theme
→ Monokai / Sublime Text 3 / Solarized など選択

チームでのテーマ・設定共有

IDE	共有方法	含まれる範囲
VS Code	Settings Sync (GitHub / Microsoft アカウント)	settings.json / 拡張機能 / キーバインド / スニペット
VS Code (リポジトリ単位)	.vscode/settings.json を git 管理	そのリポジトリだけの設定
JetBrains	Settings Sync または Settings Repository	テーマ / キーマップ / プラグイン構成
Eclipse	File → Export → Preferences で .epf 出力	エクスポート対象を選択して共有

VS Code のリポジトリ単位推奨設定（多人数開発で有用）:

// .vscode/settings.json — リポジトリ直下に commit
{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  }
}

// .vscode/extensions.json — チームに薦める拡張
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bmewburn.vscode-intelephense-client"
  ]
}

目に優しい設定のヒント

• 長時間作業は ダークテーマ + 中間色（純黒は避ける）。背景 #1e1e1e 〜 #282c34 程度がおすすめ
• 外光が強い環境では逆に ライトテーマのほうがコントラストが取れる
• OS のダークモード連動: VS Code は window.autoDetectColorScheme、JetBrains は Sync with OS
• フォントは JetBrains Mono / Cascadia Code / Fira Code 等のリガチャ対応等幅
• カラーブラインドネス対応: VS Code の Default High Contrast、JetBrains の High Contrast テーマ

FAQ

Q: テーマを変えても一部の色が変わらない
A: IDE は「UI テーマ」と「エディタの Color Scheme」が独立しています。両方を切り替える必要があります（JetBrains の場合 Theme と Color Scheme、Eclipse の場合 Appearance と Color Theme プラグイン）。

Q: ターミナル部分だけ色が違う
A: VS Code のターミナル色は terminal.background / terminal.foreground / terminal.ansiBlack 等のキーで settings.json から個別指定できます。JetBrains は Color Scheme → Console Colors。

Q: 自分でテーマを作りたい
A: VS Code は yo code (Yeoman Generator) でテーマプロジェクトの雛形を作成可能。JetBrains は Settings → Editor → Color Scheme から右クリック Duplicate → 編集 → Export。

📸 参考画像

※ 旧バージョンから引き継いだ参考画像です。手順・図解の補助としてご覧ください。