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を再起動すると、次のようにしっかり反映されます。
メニュー部分の文字色は黒か白ですが、選択した色によって自動で設定されます。

ろくデブログ

atom-material-uiをインストールしてATOMエディタの見た目をマテリアルデザイン風にする

written by

Genta