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

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

ATOMを自分好みのデザインにカスタマイズしてみよう!Syntaxテーマ編

Syntaxテーマカスタマイズしただけで、全体のデザインが統一されてないのでサクサクっと変更していきましょう。

ATOM UI theme カスタマイズ手順

ui theme templateをクローン

上記URLからテンプレートをfolkします。
GitcloneでのOKですが必ず新しいレポジトリも作成しておきましょう。

※Githubのレポジトリをテーマ毎で作成する必要があります。

テンプレートの反映

Folkしてきたファイルをローカル環境に落としたら、今度はテンプレートをATOMに反映させる必要があります。
まずpackage.jsonのファイルを開き、以下のように書き換えます。

  • name:任意のテーマ名
  • discription:説明
  • keywords:検索キーワード
  • repository:themeのGithubのレポジトリ

以上が書き換えられたらapm link --devをターミナルから実行すると、テーマが反映されます。

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

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

Developer modeでカスタマイズ

Developer mode

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

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

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

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

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

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

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

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

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

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

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

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のサイドバーの色を自分色に変えませんか?

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対策と記事執筆が得意分野です。こっそり台湾と日本のハーフです。

他の投稿を見る →