対象
- SublimetText3を常用している方
- テーマデザインの細かい調整をしたい方（
細かい方こだわりがある方 - 気分によってサクッと見た目を変えたい方
- jsonファイルでの設定に嫌気がさしている方
- 簡単に細かい見た目の調整をしたい方
また前提として、Package Controlのインストールは済んでいるものとします。
Boxy Theme
Githubより以下、引用
The most hackable theme for Sublime Text 3
The most hackableと...この言葉どおりのテーマだと思います。
2016/3にPacakage Controlに公開され、現在までGithubも活発に動いています。
また、動画による説明やGithubのwikiがとても充実しているのが素敵です。
ですが、wikiを読まなくても、各種設定を直観的に可能なのが、Boxy Themeの凄いところ。
インストール
- Ctrl+Shit+pで「Package Controll: Install Package」を選択
- 「Boxy Theme」を入力し、インストール
- SublimeText再起動
- Ctrl+Shit+pで「Package Control: Satisfy Dependencies」を選択
- SublimeText再起動
Boxy Theme:Activation
Boxy Theme:Activationでテーマの大枠を決定します。
普通のテーマであれば、ここでPreferences.sublime-settingsを編集しますが、ここからがBoxyの良い所
- Ctrl+Shit+pで「Boxy Theme:Activation」を選択
- カーソルに合わせてテーマが切り替わるので気に入ったものでEnter
設定ファイルをカリカリいじらなくていいので楽!!!
デモ
基本テーマ一覧
Boxy Yesterday
Boxy Tomorrow
僕は現在このテーマをベースに使ってます。色がどぎつくなくて見やすいです。
Boxy Ocean
Boxy Monokai
Boxy Theme:Presets
Activationで行った設定は主に背景色、文字色などのカラースキーマの変更です。
Boxy Theme:Presetsでは、タブやサイドメニュー、検索ウィンドウなどの見た目の大枠を変更できます。
デモ
プリセット一覧
- Default
- Atom
- Predown
- Material
- Code
それぞれ、有名なエディターやサブSublimeのテーマを基にしたPresetですね。
Activation×Presetsでお気に入りの見た目を選びましょう！！
Boxy Theme:Configuration
Activation・Presetsまで決めても、また細かい点が気になる細かいこだわりがあるからはいませんか？
(Ex：タブが大きい、サイドバーのインデントが深い、ある場所の文字だけ大きくしたい etc...
このような細かい設定も、Boxy Theme:Configurationで設定ファイルをいじらずに画面上で調整が可能です。
デモ
タブのサイズ、サイドバーのインデントなどを調整しています。
Activation×Presets×Theme:Configurationで自分のお気に入りテーマに調整しましょう！！
推奨設定
公式ページからPreferences.sublime-settingsの推奨設定も乗っています。
コピペで貼り付けちゃいましょう。
{
"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関係ないのもちょこちょこありますが
{
"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には情報がとても充実しているので、時間があれば読んでみるのをお勧めします！
エディターの見た目はコーディングのモチベーションに大きく左右しますよね。
皆さんもBoxyで素敵で快適な自分だけのSublimeTextに調整してみてはいかがでしょうか！