themer.dev を使うと、
ブラウザで、エディタやターミナル、etc のツールで使えるカラーテーマを簡単に作ることができます。
Best of Javascript の Growing fast this week(1週間あたりのスター数ランキング) で 1位になってました。
(@ryuta69 さん情報提供ありがとうございます)

できること
- GUIで色を確認しながらスキーマを作れる
- カラーピッカーが使える
- shadeの中間色を自動計算されることができる
- 多数ツールに対応しており、形式を合わせた設定ファイルを出力できる
- 作ったテーマをURLで簡単に共有できる
作り方
試しにVimのカラーテーマを作ってみました
はじめに、shadeの0~7、accentの0~7の色を選びます
:
の右にカラーコードを入力すると、即UIに色が反映されます

Dark・Lightモードの切り替えも可能です
caluculate intermediary shades
のチェックを入れると
shade1~6に中間色を自動で入れてくれます
accent・shadeはそれぞれの以下のような位置付けになっています
(Githubリポジトリ README参照 https://github.com/mjswensen/themer)
Color Key | Typical Usage |
---|---|
accent0 | error, VCS deletion |
accent1 | syntax |
accent2 | warning, VCS modification |
accent3 | success, VCS addition |
accent4 | syntax |
accent5 | syntax |
accent6 | syntax, caret/cursor |
accent7 | syntax, special |
shade0 | background color |
shade1 | UI |
shade2 | UI, text selection |
shade3 | UI, code comments |
shade4 | UI |
shade5 | UI |
shade6 | foreground text |
shade7 | foreground text |
右の雫アイコンから、カラーピッカーを使うこともできます。

色を設定していくと、URLにパラメータが追加されていきます
URLに編集情報が全て入るので、編集の保存・共有がURLで簡単にできてしまいます
Previewで実際コードやターミナルのUIの見え方を確認することができます。
Downloadで指定ツールにチェックボックスをつけ、設定ファイルをダウンロードすることができます
色々あります
Vimのみにチェックを入れた場合、ダウンロードしたディレクトリは以下のような構成でした
.
├── README.md
├── Vim
│ └── ThemerVim.vim
└── colors.js
README.md
に書いてある通り、.vim
内にcolors
を作ってそこにThemerVim.vim
を配置しました
Vimの場合、ファイル名を変えることで、テーマの名前も変わります
あとは.vimrc
にカラースキーマの設定を書けばVimの色が変わります
colorscheme ThemerVim
オリジナルのカラースキーマが簡単に作れました

まとめ
thermer.devを使うと、超お手軽にオリジナルのエディタカラーテーマが作れました
対応ツールも多いので、皆さん是非試してみてください
作ったVimのカラースキーマ