LOGzeudon

名古屋で働いているWebデザイナーのブログです

Atomエディタを良い感じに Material Design な見た目にするテーマ

Atomエディタを良い感じに Material Design っぽい見た目にする方法

atom-material-ui

atom.io

Atomの公式サイトで「Trending this week」1位になっているのを見つけて、試したらいい感じでした。

利用方法

UI Theme

command + ,(カンマ) で設定画面に移動し、テーマのインストール画面へ。
検索窓に「atom-material-ui」を入力し、「Theme」にボタンを切り替えると候補に出ます。

「Install」した後、とりあえず「Setting」からテーマの設定画面へと移動。

このような画面になり、下へスクロールできます。

ページ中程にある、「User Interface」「Tabs」の欄が、初期状態では外れています。
チェックを入れておくといい感じの見た目になります。

そして、Atomの設定画面に戻り、「Theme」タブ内の UI Theme にて 「Atom Material」を選択すると…。
(あとsyntax themeも明るいものに…)

こんな感じに!Material Design っぽくなりました。インストール中など、細かい要素にもアニメーションがあっていい感じ。

Syntax theme

Syntax theme もインストールしてみます。

「silvestrec」さんが投稿している3つのテーマがあります。

Atom Material

検索時の名称は「atom-material-syntax」。ちょっとブルーがかった、ダークなテーマ。

Atom Material Dark

検索時の名称は「atom-material-syntax-dark」。ブラックなテーマ。

Atom Material Light

検索時の名称は「atom-material-syntax-light」。明るいテーマ。

色の設定

テーマの設定画面で、アクセントカラーを選択できます。(Atomの再起動が必要です)

このブログのテーマカラーに変えた様子。 文字が黒いですが、指定したカラーで自動的に黒か白か設定されます。

いろいろ悩みましたが、最終的に「Atom Material Dark」でアクセントカラーを黒にしました。

終わりに

もともとのテーマ「One」も使いやすかったですが、さらにモダンで使いやすくなった気がします。
簡単なのでぜひお試しを!