SublimeText3のテーマをカスタマイズする

本日はSublimeText3のテーマをカスタマイズする方法を紹介します。

はじめに

本記事ではSublimeText3の説明はしません。

もしご存知でない方はこの先を読む前に調べて下さい。

SublimeText3のテーマ

SublimeText3では、有志の方が作成したテーマをインストールして使うことができます。

ただ、デフォルトテーマや有志が作成したテーマの一部だけ変更したい・・ということがあるのではないかと思います。

今回はテーマの一部設定を簡単に変更する方法を紹介します。

テーマファイル

SublimeText3では .tmThemeファイル でテーマを決定します。
.tmThemeファイル を変更することで既存テーマをカスタマイズすることができます。

テーマファイルの場所

SublimeText3のテーマファイルは少し分かりにくい場所にあります。
以下の環境を想定した場合について説明します。

  • Windows8.1
  • SublimeText3
  • ユーザ名はmaman
  • Package ControllerでインストールしたMonokai Extendedテーマ の場所

まずは Monokai Extended の パッケージ保存先を探します。
C:\Users\maman\AppData\Roaming\Sublime Text 3\Installed Packages を開いて下さい。
Monokai Extended.sublime-package が見つかるはずです。

続いて、Monokai Extended.sublime-package をコピーします。
更に Monokai Extended.sublime-package.zip とリネームしてzip解凍しましょう。
解凍したディレクトリの中にある Monokai Extended.tmTheme がテーマファイルです。

オリジナルテーマファイルの保存場所

Monokai Extended.tmTheme の内容を編集したら保存する必要があります。
C:\Users\maman\AppData\Roaming\Sublime Text 3\Packages\User に保存しましょう。
preferences > Color Scheme > User に保存したテーマが表示されればOKです。

あとは作成したテーマを選択すれば反映されます。

テーマファイルエディタ

テーマファイルの中身を見れば分かりますが、テキストで編集するのはなかなか大変です。
公式サイトには一度json化して設定するべし・・みたいなことが書かれていますが、できればビジュアル的に編集したいですよね。

以下のサイトにアクセスしてみましょう。

Monokai • TmTheme Editor

イイ感じの画面が表示されたのではないでしょうか。

テーマファイルを読み込む

Open > from local file... でテーマファイルを読みこむことができます。
読み込んだファイルを編集して、SaveDownload すると編集後ファイルをDLできます。

なお、Gallery から登録された有名なテーマファイルを読み込むことも可能です。
ここに登録されていれば、SublimeText3からtmThemeファイルを抜き出す必要はありません。

編集する

編集方法は直感的です。実際に使ってみた方が分かると思います。

Generalタブでは基本的な設定です。
変更してプレビュー画面を確かめてみれば効果は分かると思います。
Syntaxやプレビュー内容を変えたい場合は右下の項目を変更しましょう。

Scopesタブは言語ファイルで設定されたスコープに対する配色を設定します。
言語ファイルは .tmLanguage ファイルのことです。
詳細な説明は省きますが、言語ごとにSyntaxする定義を記述したファイルだと思って下さい。

infoタブはテーマファイルの基本情報を記述します。
外部公開する際は、UUIDが他と重複しないようにしましょう。
個人で使う分には別のテーマファイルと重複しない限り問題はありません。

設定変更例

設定変更について、1つ例を紹介しましょう。
以下の手順を実施してみて下さい。

  1. 右下の言語名をHTMLに変更
  2. Scopesタブをクリック
  3. 左下の検索欄にHTMLと入力
  4. 検索結果からHTML: Comment Blockをダブルクリック

上手くいけば以下の画面になると思います。

スコープ名は comment.block.html となっていますね。
本例でHTMLのコメントブロックを赤色に変更しましょう。
続いて以下の手順を実施します。

  1. Foregroundの下の灰色長方形をクリック
  2. 色を赤色に変更してOKをクリック

コメント部分が赤色になれば成功です。

他にも色々いじってみて下さい。
例えば、Scope を変更すれば赤色になる場所も変化すると思います。

総括

SublimeText3でテーマをカスタマイズする方法を紹介しました。

コメントを残す