Sublime Text 3 のタブの色をカスタマイズしたら気分的に作業が捗る気がする

「Sublime Text 3」を使用中のアオイです。

現在、Sublime Text 3のテーマは「Theme – itg.flat」(itg.flat.dark.sublime-theme)、カラースキームは「Monokai」をカスタマイズしたやつを設定しています。
Theme – itg.flat」はサイドバーのフォルダがお気に入り。

カラースキームである程度はカスタマイズできるのですが、前から「なんとかならんのか」と思ってたのでタブの色です。

「itg.flat」のタブはアクティブタブとの色違いがわかりやすくていいのですが、もっといい感じの色にしたいなーと思ってたところ、参考になる記事を発見!
SublimeText3のテーマをカスタマイズする | MAMANのITブログ
今回はこちらの記事を参考にSublime Text 3のタブの色を変更してみます。

スポンサーリンク

テーマカスタマイズ用のファイルを準備

Sublime Text 3のカスタマイズ

コードの色なんかはカラースキームで変更できますが、タブの色はテーマで設定されているようです。
「.sublime-theme」ファイルで設定されてるのですが、このファイルの場所がとにかくわかりにくい!

Sublime Text 3\Installed Packages/Theme – itg.flat.sublime-package
を「Theme – itg.flat.sublime-package.zip」にリネームして解凍します。
その中の「itg.flat.dark.sublime-theme」が目的のファイルです。

itg.flat.dark.sublime-theme」を「Custom.sublime-theme」とかリネームして、Sublime Text 3\Packages\User に保存します。

設定ファイル・Preferences → Setting – User で「 “theme”: “itg.flat.dark.sublime-theme”」を「 “theme”: “Custom.sublime-theme”」に変更します。

好きなようにテーマをカスタマイズ

カスタマイズ用のファイルが準備できたのであとは好きなように変更していきます。

タブの色は基本「デフォルト」「アクティブ」「ホバー」の3色設定できますが、今回はアクティブ時のみタブの色を変更します。

Custom.sublime-theme の74行目あたりがアクティブタブです。

// Active Tab

{
"class": "tab_control",
"attributes": ["selected"],
"layer0.tint": [255, 255, 255, 200]
},
{
"class": "tab_label",
"parents": [{"class": "tab_control", "attributes": ["selected"]}],
"fg": [91, 84, 81, 255],
"font.bold" : false
},

Sublime Text 3のタブカラー変更前

次のようにしてみました。

// Active Tab
{
"class": "tab_control",
"attributes": ["selected"],
"layer0.tint": [62, 177, 197]
},
{
"class": "tab_label",
"parents": [{"class": "tab_control", "attributes": ["selected"]}],
"fg": [255, 255, 255],
"font.bold" : false
},

Sublime Text 3のタブカラー変更後

変更できました!やったー!

Sublime Text のカラースキームの自作・編集

今回はテーマファイルをカスタマイズしましたが、カラースキームを自作・編集したい場合はプレビューで色を確認しながら作成できる「TmTheme Editor」がおすすめ!

TmThemeEditor
http://tmtheme-editor.herokuapp.com/


ブログ運営
PROFILE
アオイ

スマホもタブレットもAndroid派。新しいWEBサービスやツール、ガジェットはすぐ試したいタイプ。ネコとミズタマが好き。何かをカスタマイズしがち。

アオイをフォローする
スポンサーリンク
スポンサーリンク
ミズタマブログ
タイトルとURLをコピーしました