Trasis Inc.

渋谷拠点のシステム開発会社

Eclipse 4.2 Juno でワークスペースのテーマをカスタマイズする

概要

Eclipse 4.2 Juno になり、Eclipse アプリケーションは css でカスタマイズできるようになった。
設定画面から 一般 ⇒ 外観 とカテゴリを選ぶと、「テーマ」という項目があり、ここを変更した後、Eclipse を再起動すると反映される。

一方で、一般 ⇒ 外観 ⇒ 色とフォント カテゴリー内の「ビューおよびエディター・フォルダー」での設定は使用できなくなったらしい。

複数のワークスペースを切り替えて利用する場合、ワークスペースの配色を変えておくと、自分が今どのワークスペースで作業しているか、分かりやすくなる。
Eclispe 4 でのまっとうなやり方は Eclipse 4 CSS Styling- Tutorial に記述されているが、わざわざプラグインを作るのは面倒。以下に述べる手順で簡略的に実現できる。

Step 1 – ベースとなるテーマを選ぶ

一般 ⇒ 外観 の中にあるテーマ一覧の中から、自分がベースとしたいテーマを決めておく。
自分の場合は「クラシック」をベースとすることにした。

なお、テーマを変更したら Eclipse を再起動しないと、完全には反映されないので注意。

Step 2 – css ファイルのコピー

eclipse\plugins\org.eclipse.platform_4.2.0.v201206081400\css フォルダの中にテーマの css 一覧が置かれている。
ここから e4_classic_win7.css をコピーして green.css を作成した。

Step 3 – plugin.xml の修正

1つ上の階層にある plugin.xml をテキスト・エディターで開き、theme タグを追加する。

<theme
basestylesheeturi="css/green.css"
id="org.eclipse.e4.ui.css.theme.green"
label="green">
</theme>

plguin.xml ファイルを修正したので、 eclipse.exe と同じフォルダ上にある eclipse.exe -clean.cmd を実行してキャッシュをクリアしておく。

設定画面の 一般 ⇒ 外観 でテーマ一覧を見ると「green」が増えているので、これを選択する。

Step 4 – Css Spy プラグインのインストール

  • Eclipse で「ヘルプ」メニュー ⇒ Eclipse マーケットプレース を選ぶ。
  • 検索窓で「css」と入力して Enter キーを押すと、CSS Spy が見つかるので、インストールする。
  • インストール完了したら、Eclipse を再起動する。

Step 5 – 配色の調査

  • Eclipse を再起動後、右上にある「クイック・アクセス」で「css」と入力する。
  • すると、「Open CSS Spy」が見つかるので、これを選択すると、CSS Spy ダイアログが起動する。
  • Widget を選択すると、それに該当するEclipse 上の部品が赤枠で囲まれるので、これで修正したい箇所を見つける。
    例えば、CSS Id が「org-eclipse-ui-main-toolbar」のコンポーネントを選択すると、ツールバーが赤枠で囲まれる。
  • 「CSS プロパティ」のところで「background-color」を変えると、ツールバーの背景色が変わるので、これで具体的に設定したい値を決定する。

Step 4 – css ファイル修正

先ほど作成した green.css ファイルを開き、例えば以下の記述を追加すると、ツールバーとステータスバーの背景色を緑がかった灰色になる。

.MTrimBar {
background-color: #c9d9c9;
}

css ファイルを修正したら Eclipse を再起動すると反映される。