atom-material-uiをインストールしてATOMエディタの見た目をマテリアルデザイン風にする
Updated
2022.10.15
Published
2017.06.04
ATOMの公式テーマストアで長らくFeatured・Trending共に一位を独占しているのがatom-material-uiです。名前の通り、GoogleのMaterial Design Guidelinesを参考にしたテーマで、モダンで洗練されたUIを実現します。
インストール方法
command + ,(カンマ) で設定画面に移動し、テーマのインストール画面へ。

検索窓に「atom-material-ui」を入力し、「Theme」にボタンを切り替えると、結果一覧に表示されます。

「Install」したら、テーマの「Setting」へと移動。次のような画面になり、下へスクロールできます。
さらに中程に「User Interface」「Tabs」の欄があるので、チェックを入れます。

すると、こんな感じの見た目に!

だいぶMaterial Design っぽくなりました。インストール中など、細かい要素にもアニメーションがつくようになりました。
Syntax themeで配色を変える
atom-material-uiを拡張するテーマもあります。
Atom Material(atom-material-syntax)
若干青みがかったダークテーマです。

Atom Material Dark(atom-material-syntax-dark)
ブラックなダークテーマです。

Atom Material Light(atom-material-syntax-light)
白を基調とした明るいテーマです。デフォルトの状態よりもさらに全体的に明るく薄くなっています。

独自に配色を変更
テーマの設定画面で、アクセントカラーを選択できます。

色を変更した後に、ATOMを再起動すると、次のようにしっかり反映されます。
メニュー部分の文字色は黒か白ですが、選択した色によって自動で設定されます。
