初期化編

普通なやり方

apmというのがあるので、npmと一緒でapm initみたいなことすると良いかなーと思ったけどもうちょっといいやり方あった。

cmd-shift-Pでコマンドパネル開いてPackage Generator: Generate Syntax Themeを選ぶ

これで選択した所にテンプレートができてる。

atom-templateというのがgithubに公式っぽくあがっているが、微妙にそっちは古そうだった

既存テーマをベースにするときのやり方

「このテーマ、ここだけなんとかしたい」とか「このテーマをベースにしたい」
という時は、もうちょっと違うやり方がある。
その時はざっくりこんな感じ

githubでベースとなるやつをcloneする
cloneしたリポジトリの名前を変えておく
ローカルにcheckoutする
package.jsonのnameを変えておく
- 同じ名前では多分登録できないか、上書きされてしまう気がする
$apm linkを実行
- $npm linkとにたようなやつ。
- ~/.atom/packages/にシンボリックリンクする

起動編

atom --dev . で開く。
既に先ほど作ったsyntaxがインストール済みになっているはずなので、設定からそのsyntaxを選ぶ
（これがわからず最初詰まった）

あとはlessファイルをいじるだけ！

lessいじるときの細かいテクニックとか

Pigmentsプラグインは入れるべき

色を背景に入れてくれるpluginはこれまでにもあったが
こいつはlessの変数までしっかり読み込んでくれる。
マジ便利。

lessのcolor functionは積極的に使う

このあたりの関数とか特に使える

`atom --dev`だと簡単にelementをinspectできる

「あれ、ここの色どういうセレクタで調整するんだ？」ってなったら右クリックすると「Inspect Element」というのが増えている

chromeみたいにInspectorが開くので、どんなセレクタが有効になっているのかとかわかる。

【欄外】他のthemeをベースにする時のtips

割りとニッチな話。

今回、monokaiをベースにいじった。ベースがしっかりしているのだが、色名が変数化されてないという難点があるので、下記のどっちかをする必要があった。

このpull reqを取り込む
がんばって置換する

今回は後者を選んだ。「どの色をどれにあてはめる」かを後で入れ替えたかったりしたため、@pinkなどの変数名だと都合が悪かった。なので全部@color1 @color2などと変数化してあとで置き換える事にした。

atomのPackage Generatorでは、@red,@greenなどの色が最初から定数化されている。
最初はこちらを使ったが、入れ替えの調整しているうちに@redに青色が入ったりしていってわけがわからなくなってしまった。
結果として最初の開発時には番号化してしまうほうがいっそ楽だった。

登録編

だいたいnpmと一緒。

$apm loginする
- 「APIキーを貼ってね」的なことを言われるので、貼る。
package.jsonのtagにあわせて$git tag登録する
- ~~npm tagみたいなのはなさそうだった。~~
- ↑$apm publish patchみたいなのだけでよかった
$apm publishする
- repositoryフィールドのurlが間違ってたり、tagが編だったりすると怒られる。
atom上で確認する

結果

できました
青がやたら使いづらくて困っています。

Atomでthemeを自作して登録するまでの備忘録