Sublime Text の Theme – itg.flat をカスタマイズ

Theme – itg.​flat すごくいいんですが、マージされていないプルリクを見ると、サイドバーのファイルアイコンに対応というのがあったので手動で適用してみました。

ついでにタブの色や、今いる行をハイライト等の設定も行い、ますますお気に入りのテーマとなりました。

Theme – itg.flat フォルダをコピーして新しいテーマフォルダを作成

Package Control でインストールすると Packages フォルダに Theme – itg.flat フォルダがないので、GitHub から ZIP でダウンロードしてきます。

解答したフォルダを Theme – Riszw などとリネームし、itg.dark.tmTheme と itg.flat.dark.green.sublime-theme 以外の .tmTheme と .sublime-theme は不要なので削除。itg.dark.tmTheme は riszw.20150328.tmTheme と、itg.flat.dark.green.sublime-theme は riszw.20150328.sublime-theme とリネーム。

Theme – Riszw フォルダを Packages フォルダに移動して準備完了。

riszw.20150328.tmTheme を編集

<key>lineHighlight</key>
<string>#3D7626</string>

今いる行のハイライト色を変更。

<key>selection</key>
<string>#3D7626</string>

選択した部分の色を変更。

<key>guide</key>
<string>#272a32</string>

左側の縦線の色を変更。

<key>activeGuide</key>
<string>#98D487</string>

今いるカッコに対応した縦線の色を変更。

<key>stackGuide</key>
<string>#272a32</string>

今いるカッコ以外の縦線の色を変更。

riszw.20150328.sublime-theme を編集

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

今開いているタブにテーマカラーをつける。

  // Sidebar tree
  {
    "class": "sidebar_tree",
    "row_padding": [8, 4],
    "indent": 14,
    "indent_offset": 15,
    "indent_top_level": false,
    "layer0.texture": "",
    "layer0.tint": [65, 69, 78],
    "layer0.opacity": 1.0,
    "dark_content": false
  },

サイドバーの左側余白を減らす。

  //
  // DESELECTED
  // :: CLOSED
  {
    "class": "disclosure_button_control",
    "parents": [{"class": "tree_row"}],
    "content_margin": [0, 6, 0, 7],
    "layer0.opacity": 1.0,
    "layer0.inner_margin": 0,
    "layer0.texture": "Theme - itg.flat/assets/group-closed.png",
    "layer0.tint": [255, 255, 255, 200]
  },

もともとのフォルダアイコンを消す。

  {
      "class": "icon_file_type",
      // layer0.texture is filled in by code with the relevant icon name
      "layer0.opacity": 1.0,
      "content_margin": [8, 8]
  },
  //          STATE HIDDEN 1
  {
      "class": "icon_file_type",
      "settings" : ["itg_hide_folders"],
      "content_margin" : 0,
      "layer0.opacity" : 0.0
  },
  //          STATE HIDDEN 2
  {
      "class": "icon_file_type",
      "settings" : ["itg_hide_file_icons"],
      "content_margin" : 0,
      "layer0.opacity" : 0.0
  },
  {
    "class": "icon_folder",
    "layer0.texture": "Theme - itg.flat/assets/group-closed.png",
    "content_margin": [8,5]
  },
  {
    "class": "icon_folder",
    "parents": [{"attributes": ["expanded"]}],
    "layer0.texture": "Theme - itg.flat/assets/group-open.png",
    "content_margin": [8,5]
  },
  {
    "class": "icon_folder_loading",
    "content_margin": [0,0]
  }
]

adding file icons form DC theme by orizens · Pull Request #45 · itsthatguy/theme-itg-flat を適用。icons フォルダと prefs フォルダはは別のテーマからまるっともらってくる。Seti_UI とか Cobalt​2 とか。背景色によっては見えづらいアイコンもあるので、そのうち自分で作りたいな。

Preferences.sublime-setting を編集

"theme": "riszw.20150328.sublime-theme",
"color_scheme": "Packages/Theme - Riszw/riszw.20150328.tmTheme",

Preference → Settings – User で、作成したテーマの使用を指定します。