ATOM

【atom】シンタックスカラーが気に入らないなら、自分で作ればいいじゃない

More than 3 years have passed since last update.

細かい設定は置いといて、兎にも角にも手っ取り早くatom editorの配色を変えたいのである。

そんな私のような人に向けて大雑把な方法をまとめておく。


ここで入れておくと便利なパッケージ


テーマ用のあれこれを準備

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で使用される。


colors.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」のプルダウンを広げてみると、

自分が作ったテーマがその中に含まれている。不覚にも嬉しい。

それで選択をすればテーマが反映される。