前回に続いてJetBrains製IDEのカスタムテーマを作っていきましょう。
今回はエディタ部分を色々と変更してみます。
カスタムテーマの作成方法、IDE自体のカスタマイズは別記事にて紹介していますのでそちらもあわせてご覧ください！
- エディタの見た目（スタイル）を自分好みに設定する
- エディタ設定をカスタムテーマプロジェクトに統合する
- カスタムテーマをインストールしてエディタ設定を各IDEへ適用する
はじめに
エディタのカスタマイズはIDEの環境設定画面からぽちぽちと変更できます。
IDEのカスタマイズと異なり設定ファイルを編集する必要がないのでこちらのほうが簡単です。
しかし、表示言語が英語のままだと意外と面倒なのでJetBrains公式から提供されている日本語化プラグインを適用しておきましょう。
エディタのカスタマイズ
ではエディタ部分のカスタマイズをしていきましょう。
本記事ではJavaScriptのカラースキームを変えますが、IntelliJ CommunityにはJavaScriptの設定項目がありません。そのためWebStormにて設定をしていきます。
ここらへんはJetBrains製のIDEであればどれでも問題ないはずです。最終的に設定したカラースキームをエクスポートしてカスタムテーマプロジェクトに統合しますので。
環境設定 -> エディター -> カラースキームの切り替えを開きカスタマイズしたい言語もしくは言語全体の設定画面を開きましょう。
ベースにしたいテーマを選択して「複製」を実行して編集用テーマを作成します。
あとは地道に自分の好きな配色となるよう設定しましょう！
他テーマや他エディタの配色を参考にすると良い感じにできます。
カスタムテーマプロジェクトへの統合
編集したカラースキームをカスタムテーマプロジェクトに統合します。
こうすることでカスタムテーマをインポートした際に対応するエディタカラースキームも自動的に設定されるようになります。
カスタムテーマプロジェクトは下記の記事で作ったものを想定しています。
エクスポートしたtheme.iclsをtheme.xmlとなるようにファイル名を変更します。
カスタムテーマプロジェクトを開き、その中のresources/**.xmlファイルを開きます。
Step2でエクスポートしたtheme.xmlの内容をコピーして貼り付けましょう。
最後にきちんとエディタ部が変わるか動作確認します。
resources/**.theme.jsonを開いてプレビューを実行後、エディタが設定したとおりに変わればOK！
IDEへインストール
最後に作成したカスタムテーマをパッケージングしてIDEへインストールします。
手順については下記の記事にて紹介していますのでそちらをご覧ください。
補足：探すのに意外と手間取った設定
- ターミナルの背景色
-
カラースキームの切り替え -> コンソールの色 -> コンソール -> 背景 - 行番号の背景色
-
カラースキームの切り替え -> 一般 -> エディター -> ガターバックグラウンド
最後に
全3回となったJetBrains製IDEのテーマ作成はこれにて終わりとなります。
配色を決めたり設定したりと大変な部分もありますが、細部までこだわれるのでプログラミングしていても気持ちが良いです。
自作テーマ、ぜひ作ってみてください。
