細かい設定は置いといて、兎にも角にも手っ取り早くatom editorの配色を変えたいのである。
そんな私のような人に向けて大雑把な方法をまとめておく。
ここで入れておくと便利なパッケージ
-
minimap-color-highlight
色の設定をしている箇所の背景色がその色になる。
https://atom.io/packages/minimap-color-highlight -
A Color Picker for Atom
crtl + alt + c で色を選択する窓が出てきて選択すると色のコードが記述される。
https://atom.io/packages/color-picker
テーマ用のあれこれを準備
Ctrl + shift + p を同時に押すとお決まりの窓が出てくるので
そこに「theme」と入力する
すると「Package Generator : Generate Syntax Theme」という表示が出てくるのでそれを選択
C:\Users\[User]\github\my-theme-syntax
と書かれた入力画面が出てくる
「my-theme-syntax」の「-syntax」の前の部分がテーマ名として設定画面等で表示されるのでここで設定する
例えば青系統の色で揃えたいなんてなった時は「sapphire-syntax」などと設定してみる。
テーマ名が決まったらenterを押下
設定したテーマ名のディレクトリと、その中身には設定ファイルが作られる。
sapphire-syntax/
|-- CHANGELOG.md
|-- LICENSE.md
|-- README.md
|-- index.less
|-- package.json
`-- styles
|-- base.less
|-- colors.less
`-- syntax-variables.less
いざ、色を変えてみる
細かい説明は飛ばして、とりあえず文字色を変えるならcolors.lessを操作
colors.lessで設定した色がbase.less,syntax-variables.lessで使用される。
// These colors are specific to the theme. Do not use in a package!
@very-light-gray: #c5c8c6;
@light-gray: #969896;
@gray: #373b41;
@dark-gray: #282a2e;
@very-dark-gray: #1d1f21;
@cyan: #8abeb7;
@blue: #81a2be;
@purple: #b294bb;
@green: #b5bd68;
@red: #cc6666;
@orange: #de935f;
@light-orange: #f0c674;
These colors are specific to the theme. Do not use in a package!とはいかに
TOEICのスコアが異様に低い割にセンター試験で9割取ったガチガチ英文法者が意訳するには
「このテーマ特有の配色なのでパッケージで使用しないでください><」とのこと。
どのみちgit等に上げる予定であれば変更する必要のあるファイルらしい。
逆にその必要が無いのであればそのままでも良いのかもしれない。
さて、自分に分かる設定であれば、「cyanだから青系統の色、redだから赤系統の色、orangeだから...」というように色の名前に則って色を設定する必要はない。
今回は手っ取り早く色を変える設定なので、色の名称はガン無視している。
（あ、gitで公開するなら考慮した方が良いかも...）
例えばこのように設定する。
@very-light-gray: #f0f0f0;
@light-gray: #969896;
@gray: #373b41;
@dark-gray: #282a2e;
@very-dark-gray: #1d1f21;
@cyan: #55aaff;
@blue: #80bfff;
@purple: #aad5ff;
@green: #55aaff;
@red: #80bfff;
@orange: #aad5ff;
@light-orange: #55aaff;
保存、反映
設定を保存したら設定画面に移る
ctrl + shift + P で「setting」と入力して一番上に出たものを選択するかctrl + ,
画面左側の「themes」を選択し、右側の「Syntax Theme」のプルダウンを広げてみると、
自分が作ったテーマがその中に含まれている。不覚にも嬉しい。
それで選択をすればテーマが反映される。