[Boxy] SublimeText3 2016年 俺的一押し おすすめ テーマの紹介・設定をさらす

## 対象
- SublimetText3を常用している方
- テーマデザインの細かい調整をしたい方（~~細かい方~~こだわりがある方
- 気分によってサクッと見た目を変えたい方
- jsonファイルでの設定に嫌気がさしている方
- 簡単に細かい見た目の調整をしたい方

また前提として、`Package Control`のインストールは済んでいるものとします。  

## [Boxy Theme](https://github.com/oivva/st-boxy)
![tomorrow.png](https://qiita-image-store.s3.amazonaws.com/0/74129/ba913a09-a02e-7e76-04e4-307ad569bad2.png)

Githubより以下、引用

> The most hackable theme for Sublime Text 3

The most hackableと...この言葉どおりのテーマだと思います。
2016/3にPacakage Controlに公開され、現在までGithubも活発に動いています。
また、動画による説明やGithubのwikiがとても充実しているのが素敵です。
ですが、wikiを読まなくても、各種設定を直観的に可能なのが、Boxy Themeの凄いところ。

## インストール
1. Ctrl+Shit+pで「Package Controll: Install Package」を選択
2. 「Boxy Theme」を入力し、インストール
3. SublimeText再起動
4. Ctrl+Shit+pで「Package Control: Satisfy Dependencies」を選択
5. SublimeText再起動


## Boxy Theme:Activation
`Boxy Theme:Activation`でテーマの大枠を決定します。
普通のテーマであれば、ここで`Preferences.sublime-settings`を編集しますが、ここからがBoxyの良い所

1. Ctrl+Shit+pで「Boxy Theme:Activation」を選択
2. カーソルに合わせてテーマが切り替わるので気に入ったものでEnter

**設定ファイルをカリカリいじらなくていいので楽!!!**

### デモ
![boxy_activation.gif](https://qiita-image-store.s3.amazonaws.com/0/74129/a981bd01-a866-5673-99b2-349bc5d9b095.gif)

### 基本テーマ一覧
#### Boxy Yesterday
![yesterday.png](https://qiita-image-store.s3.amazonaws.com/0/74129/de0718dd-a235-590d-cbdf-6d933e8b2999.png)

#### Boxy Tomorrow
僕は現在このテーマをベースに使ってます。色がどぎつくなくて見やすいです。
![tomorrow.png](https://qiita-image-store.s3.amazonaws.com/0/74129/8c0243e1-eeac-2fd1-d414-038e314e0523.png)

#### Boxy Ocean
![ocean.png](https://qiita-image-store.s3.amazonaws.com/0/74129/1db44f96-fa6e-cfc5-218f-f12f89c80cd8.png)

#### Boxy Monokai
![monokai.png](https://qiita-image-store.s3.amazonaws.com/0/74129/5a918724-ccbe-47ef-4821-7836b85c7636.png)

## Boxy Theme:Presets
Activationで行った設定は主に背景色、文字色などのカラースキーマの変更です。
`Boxy Theme:Presets`では、タブやサイドメニュー、検索ウィンドウなどの見た目の大枠を変更できます。

### デモ
![presets.gif](https://qiita-image-store.s3.amazonaws.com/0/74129/df43e871-f6f3-b41e-a847-461808facb3b.gif)

### プリセット一覧
- Default
- Atom
- Predown
- Material
- Code

それぞれ、有名なエディターやサブSublimeのテーマを基にしたPresetですね。
**Activation×Presets**でお気に入りの見た目を選びましょう！！

## Boxy Theme:Configuration
Activation・Presetsまで決めても、また細かい点が気になる~~細かい~~こだわりがあるからはいませんか？
(Ex：タブが大きい、サイドバーのインデントが深い、ある場所の文字だけ大きくしたい etc...
このような細かい設定も、`Boxy Theme:Configuration`で設定ファイルをいじらずに画面上で調整が可能です。

### デモ
タブのサイズ、サイドバーのインデントなどを調整しています。
![configuration.gif](https://qiita-image-store.s3.amazonaws.com/0/74129/983ec8ef-525e-9cce-494f-db27983db71e.gif)

**Activation×Presets×Theme:Configuration**で自分のお気に入りテーマに調整しましょう！！

## 推奨設定
公式ページから`Preferences.sublime-settings`の推奨設定も乗っています。
コピペで貼り付けちゃいましょう。

```json
{
    "always_show_minimap_viewport": true,
    "bold_folder_labels": true,
    "caret_extra_bottom": 1,
    "caret_extra_top": 1,
    "caret_extra_width": 1,
    "caret_style": "blink",
    "fade_fold_buttons": false,
    "indent_guide_options": ["draw_normal", "draw_active"],
    "line_padding_bottom": 2,
    "line_padding_top": 2,
    "overlay_scroll_bars": "enabled",
    "show_encoding": true,
    "show_line_endings": true
}
```

## 僕の設定例
Configurationなどでいじった内容は`Preferences.sublime-settings`に反映されるので、  まわりに良さげな設定がいたらコピペでもらっちゃいましょう。
例として僕のをさらします。（Boxy関係ないのもちょこちょこありますが

```json
{
	"always_show_minimap_viewport": true,
	"bold_folder_labels": true,
	"caret_extra_bottom": 1,
	"caret_extra_top": 1,
	"caret_extra_width": 1,
	"caret_style": "blink",
	"color_scheme": "Packages/Boxy Theme/schemes/Boxy Tomorrow.tmTheme",
	"default_encoding": "UTF-8",
	"default_line_ending": "unix",
	"draw_white_space": "all",
	"fade_fold_buttons": false,
	"fallback_encoding": "UTF-8",
	"font_face": "Myrica M",
	"font_size": 9,
	"hot_exit": false,
	"ignored_packages":
	[
		"Vintage"
	],
	"indent_guide_options":
	[
		"draw_normal",
		"draw_active"
	],
	"line_padding_bottom": 2,
	"line_padding_top": 2,
	"overlay_scroll_bars": "enabled",
	"remember_open_files": false,
	"show_encoding": true,
	"show_line_endings": true,
	"tab_size": 4,
	"theme": "Boxy Tomorrow.sublime-theme",
	"theme_accent_sky": true,
	"theme_autocomplete_item_selected_colored": true,
	"theme_button_rounded": true,
	"theme_find_panel_close_hidden": true,
	"theme_find_panel_materialized": true,
	"theme_grid_border_size_lg": true,
	"theme_icon_button_highlighted": true,
	"theme_icons_atomized": true,
	"theme_scrollbar_rounded": true,
	"theme_sidebar_disclosure": true,
	"theme_sidebar_highlight_selected_text_only": true,
	"theme_sidebar_indent_top_level_disabled": true,
	"theme_sidebar_indent_xl": true,
	"theme_sidebar_size_xxs": true,
	"theme_size_xs": true,
	"theme_tab_arrows_hidden": true,
	"theme_tab_selected_label_bold": true,
	"theme_tab_selected_underlined": true,
	"theme_tab_separator": true,
	"theme_tab_size_xs": true,
	"theme_tab_width_auto": true,
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": false
}
```
## 最後に
Add-onにはファイルアイコンの追加分やLinter用のテーマも良いされています。
`PackageResourceViewer`を使って、カラースキーマレベルでのいじり方も公式ページで紹介されいます！
[Boxy-wiki](https://github.com/oivva/st-boxy/wiki)には情報がとても充実しているので、時間があれば読んでみるのをお勧めします！ 

エディターの見た目はコーディングのモチベーションに大きく左右しますよね。

**皆さんもBoxyで素敵で快適な自分だけのSublimeTextに調整してみてはいかがでしょうか！**