ATOMのテーマをCSSだけでカスタマイズする方法！Syntaxテーマ編

m.k

8年前

前回はSlackのサイドバーの色を変更してみました。
Slackのサイドバーの色を自分色に変えませんか？
今回は恋するテキストエディタでおなじみじゃない方のATOM

弊社AWESOMEのコーダーは全員ATOM使いというATOM狂い。
そんな毎日のように眺め続けるATOMの色を変えたい！
テーマをカスタマイズしたい！と思うのは僕だけじゃないはず！
と思いましたが弊社では僕だけでした。

悲しい。

ていうかSlackの色を変えたいっていう要望も特には無かった。
切ない。
今回はそんな需要が多さなさそうなATOMのテーマ開発について全2回で説明していきたいと思います。

ATOMのテーマ開発について

マニュアルをみよう！

まずATOMのテーマを開発する際に参考にしたのがこちらのページ

Creating a Theme

ATOMですでにマニュアルが用意されてるんです。
このマニュアルを見ながらゴリゴリ作っていきましょう。

ATOMには２種類のテーマがあります。

引用元：Creating a Theme

UI Theme

Syntax Theme

の二つに分かれています。
今回はまずSyntax Themeの作成から進めていきたいと思います。

Syntax ThemeというのはATOMでコードをゴリゴリかくスペースの事ですね。

上記の画像の緑色の部分がそれに該当します。
ATOM使って事ある方でしたら「ああ、あそこね」とすぐに分かってもらえるでしょう。

開発前に確認

core packageの中のdev-live-reload

こちらが有効になっているのを確認しておいてください。
今回めっちゃ使います。

テーマ開発スタート！

テンプレートテーマを作成

[cmd+Shift+P]で検索タブが出てきますので、そこに[Generate Syntax Theme]を入力。
[Generate Syntax Theme]を選択しますと。

※必ず「-syntax」で終わるようにpathを入力します。
今回は「momoiro-girl-syntax」としました。

するとこのようにバッチリファイルが作成されました。
ちなみに私の環境ですと/github/momoiro-girl-syntaxといった具合にRootにファイルが作成されました。

テーマを選択する。

もうすでにこの段階でオリジナルテーマの設定が可能となっています。
開発を進める前にATOMのテーマを変更しておきます。

「ATOM>環境設定>Theme>シンタックステーマ」

と選んでいくと、先ほど作成したテーマが選択できるようになっているのがわかります。

ここで表示されない人はおそらくpathの名前を設定ミスしてる可能性があります。
ではmomoiro-girlテーマを選択しましょう。

開発者モード

テーマ開発をする際、ATOMを開発者モードにすることで、開発が爆速になります。
ATOMの開発者モードにはとっても簡単に切り替えることができます。

「表示＞開発＞開発者モードで開く」と選択すると開発者モードに切り替えることができます。

package.jsonを設定

package.jsonの中にテーマの概要を記入していきます。
基本的には適当でいいのかなと思いますが、しっかりと書きたい方は是非。

早速色を変更していくぞ！

styles>colors.lessを開いてみましょう。

ATOMのテーマはlessで作成されているため。
colors.lessの中に引数が格納されています。
基本的にはここの色をゴリゴリ変えていくだけです。

あらやだ簡単！

dev-live-reloadが有効になっていたると、リアルタイムで変更が確認できます。

そうこんな風に！
ATOMを自分色に染めていく準備が整いました！

基本は３つのファイルをいじるだけ。

color.lessで色の引数を設定

syntax-variables.lessでsyntaxの細かな色を設定。

base.lessでSyntax themeのベースの色を設定。

といった感じです。
cssを触ったことがある人でしたら割とすぐに理解できるのではないでしょうか。
では早速momoiro-girlテーマを作っていきたいと思います。

配色に悩んだら活用したいオンラインツール厳選して５選ご紹介！

で紹介したツールを駆使して配色を必死で考えていきました。
考えた末に出来上がったのがこれ！

桃色ガール！

視認性ゼロ！

背景ピンクは０点ですね。
コーディングの効率が落ちそうで仕方ありません。
これでは仕事にならないのでテーマを作成し直します。

出来上がったのがこちら。
これなら視認性も確保できてスタイリッシュにまとまったのではないでしょうか。

公開しよう！

せっかく作ったのだから公開してみましょう！
まずATOM公式ページでサインインしておきます。

その後ターミナルでテーマフォルダに移動し

git add やgit commitをしたあとに

apm publish major

すると
＞Welcome to Atom!
Before you can publish packages, you’ll need an API token.
Visit your account page on Atom.io https://atom.io/account,
copy the token and paste it below when prompted.
Press [Enter] to open your account page on Atom.io.

とメッセージが表示されますので、[Enter]を押すと。

ATOMのサイトが開きます。