VSCode、Vim、iTerm、Slackなどのカラーテーマが簡単に作れるWebサイト 「themer.dev」

[themer.dev](https://themer.dev/) を使うと、
ブラウザで、エディタやターミナル、etc のツールで使えるカラーテーマを簡単に作ることができます。

Best of Javascript の Growing fast this week(１週間あたりのスター数ランキング) で 1位になってました。
(@ryuta69 さん情報提供ありがとうございます）

<img width="1369" alt="スクリーンショット 2020-04-21 23.07.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402968/765fe9f4-61a5-5d04-cc3b-de663851db0e.png">

# できること
- GUIで色を確認しながらスキーマを作れる
- カラーピッカーが使える
- shadeの中間色を自動計算されることができる
- 多数ツールに対応しており、形式を合わせた設定ファイルを出力できる
- 作ったテーマをURLで簡単に共有できる

# 作り方

試しにVimのカラーテーマを作ってみました

はじめに、shadeの0~7、accentの0~7の色を選びます
`:`の右にカラーコードを入力すると、即UIに色が反映されます

<img width="1278" alt="スクリーンショット 2020-04-21 23.07.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402968/d781ffde-9022-2709-7cc0-8789732697ba.png">

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 |

右の雫アイコンから、カラーピッカーを使うこともできます。

<img width="735" alt="スクリーンショット 2020-04-21 23.08.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402968/5ec3c955-fb9e-66bd-f49d-61958d1a259d.png">

色を設定していくと、URLにパラメータが追加されていきます
URLに編集情報が全て入るので、編集の保存・共有がURLで簡単にできてしまいます

今回作成したテーマのURLです
https://themer.dev/?activeColorSet=dark&colors.dark.shade0=%23121212&colors.dark.shade7=%23868ea2&colors.dark.accent0=%23ffff00&colors.dark.accent1=%23d7ffff&colors.dark.accent2=%23d7ffaf&colors.dark.accent3=%2380ffff&colors.dark.accent4=%230087af&colors.dark.accent5=%2388bff7&colors.dark.accent6=%23005faf&colors.dark.accent7=%23afffff

Previewで実際コードやターミナルのUIの見え方を確認することができます。
<img width="1317" alt="スクリーンショット 2020-04-21 23.08.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402968/8c576b65-0aa3-bbbf-a6e2-fa7da2f58090.png">


Downloadで指定ツールにチェックボックスをつけ、設定ファイルをダウンロードすることができます
<img width="1320" alt="スクリーンショット 2020-04-21 23.08.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402968/481c2f02-cfb1-39de-51ff-2d45fa258cc9.png">
色々あります


Vimのみにチェックを入れた場合、ダウンロードしたディレクトリは以下のような構成でした

```:themerディレクトリ                                                                           
.
├── README.md
├── Vim
│   └── ThemerVim.vim
└── colors.js
```

`README.md`に書いてある通り、`.vim` 内に`colors`を作ってそこに`ThemerVim.vim`を配置しました
Vimの場合、ファイル名を変えることで、テーマの名前も変わります

あとは`.vimrc` にカラースキーマの設定を書けばVimの色が変わります

```vim
colorscheme ThemerVim
```

オリジナルのカラースキーマが簡単に作れました

<img width="1267" alt="スクリーンショット 2020-04-21 23.45.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402968/12aa888f-a8f6-cf7f-a5f4-eb9c139abf09.png">

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

### 作ったVimのカラースキーマ
https://github.com/uji/ujicolo.vim