themer.devを使うと、
ブラウザで、エディタやターミナル、etc のツールで使えるカラーテーマを簡単に作ることができます。
できること
- 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を使うと、超お手軽にオリジナルのエディタカラーテーマが作れました
対応ツールも多いので、皆さん是非試してみてください