muneyasu.jp

CMS制作販売会社のWebデザイナーむねやすのブログ。Webの話とWebに関係ない話が入り交じります。たぶん

2014年12月9日

SublimeTextのカラースキームとテーマを作ってみましたの巻き

この記事はSublime Text Advent Calendar 2014の8日目の記事です。

私はSublime Textを多用しているものの、ただ普通にコーディングするときの軽いテキストエディター、程度にしか使えてまいません。や、もちろん色々便利なショートカット、パッケージもある程度使ってはいます。いちおう。
ですので今回は、カラースキームとテーマを適用カスタム&適用について紹介したいとおもいます。

やり方は、凄くたくさんのブログで取り上げられていますのでここでは軽〜く。

カラースキーム

TmTheme Editor http://tmtheme-editor.herokuapp.com/
こちらにアクセスして、GUIでお好みの色を選んでいきます。
ギャラリーが用意されているので、お好みのものがあればそれを元にカスタマイズもできます。
できたら、ダウンロードボタンをぽちっとしてダウンロード、下記のフォルダへ。

Mac : /Users/[ユーザー名]/Library/Application Support/Sublime Text 3/Packages/User
Win : /Users/[ユーザー名]/AppData/Roaming/Sublime Text 3/Packages\User ※Winの環境が無いため、調べたものを載せています

Preferences > Color Scheme > User > “カラースキーム名” を選択すると適用されます。

テーマ

今回私はもの凄くよく使われているテーマのひとつ、「itg.flat」をカスタマイズしてテーマを作成しました。

ダウンロードしてきた「itg.flat.dark.sublime-theme」リネームし、先ほどのカラースキームと同じフォルダへ。
JSONのファイルなので私と同じくデザイナーさん方には「ハァ?」かもしれませんが、よく見ればここを変えればいいんだな!? というのが分かる程度のデータになっていましたので、良くわからない人はとりあえず触ってみましょう。私でも出来たので。。。てへ

適用は、Preferences > Setting – User (⌘ + ,)を選ぶとテーマセッティング用のJSONが開きますので、
“theme”: “先ほどリネームしたもの.sublime-theme” に書き換え、保存すると適用されます。

とりあえず作ってみた

私が別枠でやっている「猟銃女子」のブログ・カラーをイメージしたカラースキームとテーマを作成してみました。
Dark系とLight系の2種類。

Light系
20141208_theme-light

Dark系
20141208_theme-dark

基本を #5A3E80(紫)、#F5BCD2(ピンク)、少し #17A08B(緑)で、そこから少し薄い黄色や水色を入れつつ女子っぽくて少しエロいかんじを目指しつつ作ってみました。・・・が、Darkの方は特にちょっと気持ち悪いですね!
時間がある時にゆっくり作られた方が良いかと思います。

Advent Calendar 2014 、続いては妖精の見える4歳児のママ aikakohama さんです!
内容被りそう、ごめんなさい。