【Atom】既存テーマを自分好みに変更する方法～自作テーマの作成と公開の仕方②～
今回はほかの人が作成したテーマを自分好みにちょこっとだけ変更する方法について書いていきます。自分で１から新しいテーマを作る気はないけど、今使っているテーマのここがこうだったらもっと良いのに！と思うような方には是非読んでいただきたいですし、自分オリジナルのテーマを作りたい人もまずは既存のテーマを少しいじる所から始めると作り方のイメージがつくと思います。
⓪準備
変更したいテーマのインストール
この記事であげる例はpear-syntaxにします。もちろん自分が普段使用しているテーマでも構いませんが、記事にそって編集していきたいという方やお気に入りのテーマを変更したくないよという方はインストールしておいてください。インストール方は以下の通りです。
- [ctrl + ，]を押して設定画面を開く
- Installをクリック
- Search packagesの欄に"pear-syntax"と記入
- THEMESをクリック
- pear-syntaxの欄のINSTALLをクリック
上の画像ではInstallがされているのでUNINSTALLとなっていますがインストール済でなければINSTALLになっているはずです。
pigmentsのインストール
こちらは是非とも、というか色を使う場合は必須のパッケージであるpigmentsのインストール法についてです。すでにインストールされている方は読み飛ばしてください。
pigmentsというのは簡単にいうと、ソースコード上にある色情報を視覚的に提示してくれるパッケージですね。例えば、rgb(20,100,179)とか言われても具体的にどんな色かわからないわけですが、rgb(20,100,179)と実際の色付きで表示してくれるとっても便利なパッケージです。
- [ctrl + ，]を押して設定画面を開く
- Installをクリック
- Search packagesの欄に"pigments"と記入
- PACKAGEをクリック
- pigmentsの欄のINSTALLをクリック
coolorsの表示
これはAtomとは関係ないのですが様々なカラーパレットがあるExplore - Coolors.coを表示させておきましょう。あとで色を持ってくるときに使います。
①変更したいテーマの選択
インストールされているシンタックステーマの中から今回編集したいテーマを選択します。
※ここで一点注意なのですが、atom-dark-syntaxやone-light-syntax, solarized-syntaxなどのCore Themesとよばれるシンタックステーマは中身が編集できないのでCommunity Themesの中から選んでください。Community Themesになかったら準備の項をみてpear-syntaxなどの適当なテーマをインストールしてください。
ここまでできたら
VIEW CODEをクリックしてください。
②テーマの中身の説明
- stylesをクリック
- base.less, colors.less, syntax-variables.lessをそれぞれクリック
凝っているテーマだとほかのlessファイルがあったり、２番であげたようなlessファイルがなくてほかのファイルになっている場合があります。
３つのファイルそれぞれについて説明していきます。
colors.less
準備のところで用意したpigmentsパッケージが入っていると下の画像のように色とりどりなテキストが見えると思います。このファイルには使用する色を変数として登録しておきます。
@変数名 ： 色(ここでは16進数表記);
で色を変数に入れておきます。
syntax-variables.less
colors.lessと似ているファイルですが、よく使いそうな色を用途別に登録しておきます。
例えば、エディタの背景色を決めるsyntax-background-colorや文字色を決めるsyntax-text-colorは様々な場所で使用することになるのでここで一つの変数として登録しておきます。もし、いちいち先ほどのcolor.lessの色で指定していると、あとで背景色や文字色を変えようとしたときにすべて変更する羽目になりますが、background-colorなどでまとめて管理しておけばbackground-colorの中身を変えるだけで一気に書き換わってくれるわけですね。
どんな時に使いまわすのかは次回詳しく説明しようと思います。
base.less
具体的にどの部分でどの色を使うか指定しているのがこのファイルです。
ここをかきかえることでテーマが実際に変わっていきます。
たとえば下の画像のbackground-colorを変えればエディタの背景が、colorの部分を変更すると文字色が変わります。(ただ、先ほども述べた通り文字色や背景色など使いまわすようなものを変えるときはたいていsyntax-variables.lessの中身を編集します)
このファイルはたくさん項目があってどこを変えたら何が変わるのかわかんない！となる可能性大なので以下に主要なものだけ載せておきます。次回の記事ではどの部分がどの色と対応しているのか調べる方法についても載せるのですが以下の主要なものはよく使うと思うのでおさえておいて損はないです。
- atom-text-editor の中の background-color……エディタの背景
- atom-text-editor の中の background-color……文字色
- .selection .region……範囲選択したときの背景色
- .comment……コメントの文字色
- .storage……型などの色
- .constant……静的変数の色
- .constant内の&.numeric……数字の色
- .variable……関数の引数の色
- .string……文字列の色
- .support内の&.function……特別な関数呼び出しのときの関数名の色
- .entity内の&.name.function……関数定義の関数名の色
- .entity内の&.name.type……クラス名の色
③テーマを編集して変更を確認する
ようやく本題のテーマ編集です。
まずは背景色を変えてみましょう。
syntax-variables.lessファイルの中のsyntax-background-colorの右側を#363537に変更してみましょう。変更できたら、[ctrl + s]を押してセーブしましょう。この際、あとで修正前に戻せるように元のコードはコメントアウトして残しておくとよいです。
これだけでは変更が反映されません。毎回Reloadしてもいいのですがそれではめんどくさいのでリアルタイムに変更を反映してくれるモードにしましょう。
- [ctrl + shift + p] でコマンドパレットを開く
- "dev"と入力
- Application: Open Devを選択
- ソースコードを含む好きなフォルダを選択
この時点で現在編集しているテーマが現在設定されているテーマなら変更が反映されているはずです。もし設定されているテーマが違う場合は
- [ctrl + ，]を押して設定画面を開く
- Themesをクリック
- Syntax Themeの選択部分を"Pear"に変更
変更を確認してみましょう。
なんと下の画像のようにlight-syntaxがdark-syntaxに早変わり！
変更前
変更後
文字列の色が気に食わねえ！という場合は、
base.lessの中の.stringの中のcolorを#EF2310に変更してみましょう。
すると今度は下の画像のように文字列の部分の色が赤色に変わったのが分かるかと思います。
変更前
変更後
このように自分の思うがままに色を変更することができます。
もし元に戻したい場合は先ほどのコメントアウトを外すか、アンインストールしてから再度インストールしなおしてみてください。
最後にこれは私もよくある既存テーマの修正なのですが、.meta内の&.class内をsyntax-text-colorに修正することが多いです。時々クラスの中身の文字の色を変えるテーマがありますが大抵見にくい場合が多いのでここをsyntax-text-colorに変更することでみやすくしたりしています。このように気に食わないところはどんどん自分なりに修正してみましょう。
おまけ：色の探し方
どんな色に変更しようか迷ったときは準備の項であげたCoolors.coを試してみよう。自分でカラーパレットを作成することもできるのですが、世界中の人が公開しているのでそれを見て、気に入った色があればその色の16進数をコピペしてきましょう。
詳しい使い方についてはここには載せませんが、ググってみてください。いい記事があるはずです。(もしかしたらどこかでCoolorsの使い方についても書くかも)
まとめ
今回は既存テーマの編集法について扱いました。なんとなく変更の仕方は理解できたでしょうか。難しく考えすぎず色々触ってみて慣れていきましょう。
次回はいよいよ自分のオリジナルテーマを作成し公開する方法について書いていこうと思います！ 是非つぎの記事もご覧ください！
