東京メトロ配色のVimカラースキームを作った

Kazuki Koide

September 24, 2018

VimConf2017でcocoponさんがicebergというカラースキーマを作った時の話をしているのを聞いて自分もオリジナルのカラースキーマを作ってみたいと思った。東京に住んでるし東京をテーマとしたカラーススキームを作れないかとちょっと考えたものの、色彩センスに自信がなかったので、東京メトロのテーマカラーを使ってみることにした。

ソースコード

koirand/tokyo-metro.vim: Vim color scheme using theme color of Tokyo Metro lines.

作成過程

まずはPhotoshopで各路線のテーマカラーを並べた。

ダークモード派なので黒背景。思ったより見やすい印象を得た。さすが偉い人が考えた配色である。ただ千代田線と南北線の色が似ていて使い分けが難しい。カラースキームの自作方法についてWebで調べて見たところ、設定項目数が多くなかなか大変そうだったので、iceberg.vim をForkしてカスタマイズすることにした。README に記載されているが、カラースキーマを半自動生成する仕組みが提供されているのでこれを使用した。具体的な手順としては以下の通り。

  1. cocopon/pgmnt プラグインをVimにインストール。
  2. src/template.vim にあるテンプレートを変更。
  3. autoload/iceberg/palette/dark.vim をコピーして、autoload/tokyometro/palette/dark.vim を作成して、配色を変更。:source % してVimに読み込む。
  4. src/iceberg.vim をコピーして src/tokyo-metro.vim を作成して、色と対象オブジェクトのマッピングを少し調整。cd %:hしてカレントディレクトリを変更してから:source %すると、color/tokyo-metro.vim が生成される。

できたのがこちら。 tokyo-metro - Vim Colors

screenshot

濃紺の背景は東京の夜景っぽくて違和感なかったのでオリジナルのままにした。このサンプルでは表示されてないけど、言語によっては演算子が副都心線の茶色になるはず。それから丸ノ内線については、やは赤はエラー感が強く出てしまい違和感が拭えなかったので、丸の内線ユーザーには申し訳ないが素直にエラー系の色を当てることにした。

作ってみた感想

オリジナルカラースキームができてうれしい。cocopon/pgmnt プラグインが良く作られている。色をHSLで指定できるので、微妙な色の調整がやりやすそうに感じた。今回テーマカラーありきだったので、あまり配色には悩まなかったが、次回作るときは配色に拘ってみたい。