前回の記事に引き続き、今回はATOMのUIテーマ部分のカスタマイズに挑戦していきたいと思います。
Syntaxテーマ部分のカスタマイズなどはこちらを参考してください。
Syntaxテーマカスタマイズしただけで、全体のデザインが統一されてないのでサクサクっと変更していきましょう。
目次
ATOM UI theme カスタマイズ手順
ui theme templateをクローン
https://github.com/atom-community/ui-theme-template
上記URLからテンプレートをfolkします。
GitcloneでのOKですが必ず新しいレポジトリも作成しておきましょう。
※Githubのレポジトリをテーマ毎で作成する必要があります。
テンプレートの反映
Folkしてきたファイルをローカル環境に落としたら、今度はテンプレートをATOMに反映させる必要があります。
まずpackage.jsonのファイルを開き、以下のように書き換えます。
- name:任意のテーマ名
- discription:説明
- keywords:検索キーワード
- repository:themeのGithubのレポジトリ
以上が書き換えられたらapm link --devをターミナルから実行すると、テーマが反映されます。
反映されたテーマはこのように選択できるようになります。
もし反映されていない場合は一度ATOMを立ち上げなおしましょう。
Developer modeでカスタマイズ
Developer mode
Syntaxテーマの開発のときと同じように、Developer modeでの開発を行っていきます。
上記画像を参考にDeveloper modeを起動するか、ターミナルからatom --devと入力して開きます。
いよいよATOMのカスタマイズ
前回と要領は一緒で、Stylesフォルダの中のlessファイルをいじっていくだけです。
ATOMのUIテーマの場合はstyles>ui-variables.lessをいじるだけでOKです。
その他細かい部分に関しては、色々いじって解決していってくださいね。
今回はベースの色を簡単にですが、このように変更してみました。
必要な部分だけ変更しています。
Live reloadが有効になっている場合、変更結果がリアルタイムで反映されるため直感的にカスタマイズできます。
前回と今回で完成したテーマがこちら。
見やすさとちょっとした可愛さをプラスしてみました。
Slackと合わせるとこんな感じ。
中々いい感じに統一感がでてきたのではないでしょうか。
色々な配色を試して、自分好みのATOMテーマのカスタマイズに挑戦してみてくださいね。
配色に悩んだりした場合はこちらのツールなんかを活用してみてくださいね。
https://awe-some.net/2016/10/color/
Publish
カスタマイズが完了したら、いよいよ公開していきましょう。
公開は以前の記事でも書いたのですが、再度説明しておきます。
git add やgit commitをしたあとに
apm publish majorもしくはapm publish minor
で公開は完了です。
とっても簡単ですね。
- majorとminorの違い
- major:メジャーアップデート、minor:マイナーアップデートというようにVerの反映の仕方が変わります。
ダウンロード
公開されたらいよいよDLしましょう。
前回Syntaxテーマのインストール方法で述べた方法と全く同じです。
apm install テーマ名とターミナルから入力するだけでインストールは完了です。
ATOMを再起動することで、テーマ変更画面から変更できるようになっているのが確認できるかと思います。
是非とも友達にシェアして使ってもらってくださいね。
マンノテーマ配布中
今回ブログで開発していったATOMのテーマを配布しています。
配色変えただけなのですが、もし気になった方はDLして使ってみてくださいね。
apm install manno-wonder-ui
apm install manno-wonder-syntax
をターミナルに入力するだけでOKです。
マンノワールドへみんなで飛び込もう！
まとめ
色を変更するだけなので、いとも簡単に自分好みのテーマが開発できます。
自分好みの配色にして、視認性を高めたり、テンションを高めたりしてくださいね。
今はSlackとATOMと配色を合わせているので、統一感を出しています。
ATOMのテーマカスタマイズしている人はまだまだ多く無い。
ていうか需要がない？
そんな疑惑もありますが、たまにテーマを変えると新鮮な気分にもなるためおすすめです。
Slackのテーマカスタマイズはこちらを参考にしてくださいね。
