ローディング中

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

前回の記事に引き続き、今回はATOMのUIテーマ部分のカスタマイズに挑戦していきたいと思います。
Syntaxテーマ部分のカスタマイズなどはこちらを参考してください。

ATOMのテーマをCSSだけでカスタマイズする方法!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をターミナルから実行すると、テーマが反映されます。

スクリーンショット 2016 11 04 午後2 40 55

反映されたテーマはこのように選択できるようになります。
もし反映されていない場合は一度ATOMを立ち上げなおしましょう。

Developer modeでカスタマイズ

Developer mode

スクリーンショット 2016 10 26 午後8 37 40

Syntaxテーマの開発のときと同じように、Developer modeでの開発を行っていきます。
上記画像を参考にDeveloper modeを起動するか、ターミナルからatom --devと入力して開きます。

いよいよATOMのカスタマイズ

前回と要領は一緒で、Stylesフォルダの中のlessファイルをいじっていくだけです。
ATOMのUIテーマの場合はstyles>ui-variables.lessをいじるだけでOKです。
その他細かい部分に関しては、色々いじって解決していってくださいね。
今回はベースの色を簡単にですが、このように変更してみました。

スクリーンショット 2016 11 04 午後2 43 11

必要な部分だけ変更しています。
Live reloadが有効になっている場合、変更結果がリアルタイムで反映されるため直感的にカスタマイズできます。
前回と今回で完成したテーマがこちら。

スクリーンショット 2016 11 04 午後3 00 51

見やすさとちょっとした可愛さをプラスしてみました。
Slackと合わせるとこんな感じ。

スクリーンショット 2016 11 04 午後3 03 21

中々いい感じに統一感がでてきたのではないでしょうか。
色々な配色を試して、自分好みのATOMテーマのカスタマイズに挑戦してみてくださいね。
配色に悩んだりした場合はこちらのツールなんかを活用してみてくださいね。

https://awe-some.net/2016/10/color/

Publish

カスタマイズが完了したら、いよいよ公開していきましょう。
公開は以前の記事でも書いたのですが、再度説明しておきます。

git addgit 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のテーマカスタマイズはこちらを参考にしてくださいね。

Slackのサイドバーの色を自分色に変えませんか?

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.