themer.dev を使うと、
ブラウザで、エディタやターミナル、etc のツールで使えるカラーテーマを簡単に作ることができます。
Best of Javascript の Growing fast this week(１週間あたりのスター数ランキング) で 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のカラースキーマ