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

前回はSlackのサイドバーの色を変更してみました。
Slackのサイドバーの色を自分色に変えませんか?
今回は恋するテキストエディタでおなじみじゃない方のATOM
ATOMのテーマをCSSだけでカスタマイズする方法!Syntaxテーマ編

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

悲しい。

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

ATOMのテーマ開発について

マニュアルをみよう!

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

Creating a Theme

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

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

ATOMのテーマをCSSだけでカスタマイズする方法!Syntaxテーマ編
引用元:Creating a Theme

UI Theme

Syntax Theme

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

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

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

開発前に確認

core packageの中のdev-live-reload

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

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

テーマ開発スタート!

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

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

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

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

※必ず「-syntax」で終わるようにpathを入力します。
今回は「momoiro-girl-syntax」としました。
ATOMのテーマをCSSだけでカスタマイズする方法!Syntaxテーマ編

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

テーマを選択する。

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

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

と選んでいくと、先ほど作成したテーマが選択できるようになっているのがわかります。
ATOMのテーマをCSSだけでカスタマイズする方法!Syntaxテーマ編

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

開発者モード

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

「表示>開発>開発者モードで開く」と選択すると開発者モードに切り替えることができます。
ATOMのテーマをCSSだけでカスタマイズする方法!Syntaxテーマ編

package.jsonを設定

ATOMのテーマをCSSだけでカスタマイズする方法!Syntaxテーマ編
package.jsonの中にテーマの概要を記入していきます。
基本的には適当でいいのかなと思いますが、しっかりと書きたい方は是非。

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

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

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

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

あらやだ簡単!

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

ATOMのテーマをCSSだけでカスタマイズする方法!Syntaxテーマ編
そうこんな風に!
ATOMを自分色に染めていく準備が整いました!

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

color.lessで色の引数を設定

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

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

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

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

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

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

桃色ガール!

視認性ゼロ!

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

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

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

公開しよう!

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

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

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

git addgit 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のサイトが開きます。

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

ここからAPI TOKENをコピーしてターミナルに入力するだけで公開は完了です
publishにかんしてはこちらを参考にすると良いでしょう。

publishing

ちなみに私のテーマはこちら。

インストールしよう!

ダウンロードはATOMのinstallから頑張って探す方法と、コマンドから一発でインストールする方法があります。
今回は簡単なコマンドでのインストール方法をご説明していきます。

apm install テーマ名

たったこれだけでATOMにインストールされます。
インストール完了後はATOMを再起動するだけで反映されます。
是非みんなに広めてつかってもらってくださいね!

次回はUIの方をやるよ!

今回はシンタックステーマだけやりましたが、次回はUIの方もカスタマイズしていきたいと思います。
※UIカスタマイズ方法を公開しました!
▶ATOMを自分好みのデザインにカスタマイズしてみよう!UIテーマ編!

配色さえ決まっていれば1時間もかからずにつくってしまえそうなほど簡単なテーマ開発。
是非ともチャレンジしてみてくださいね!

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

WEB DIRECTOR

マンノカズミチ

バンドマンを経て、台湾で日本語教師をしてましたが、2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。こっそり台湾と日本のハーフです。

他の投稿を見る →